Question

您好我使用的是使用BrowserAnimationsModule的Angular。但是在通用服务器端，它会给出错误“文档未定义”。

因为Universal不支持BrowserAnimationsModule，我需要一种方法让服务器忽略BrowserAnimationsModule并用NoopAnimationsModule替换它。

这就是我现在所拥有的，但它不起作用。任何其他方法也是受欢迎的。

let imports = [
    BrowserModule.withServerTransition({appId: 'ang4-seo'}),
    FormsModule,
    HttpModule,
    routes
];

if(isPlatformBrowser(PLATFORM_ID)){
    imports.push(BrowserAnimationsModule);
}

@NgModule({
    imports: imports,

有什么方法可以解决这个问题吗？

Answer 1

编辑：从6.1版开始，此解决方案似乎不起作用。我会留下以下解决方案，以防有一天它再次运行，如果我找到另一种解决方案则更新。

原始答案：

我遇到了同样的问题。完全归功于this fork on github from pquarme。

您需要做的是：

1）从app.module.ts中删除对BrowserAnimationsModule的任何引用，并创建一个单独的app.browser.module.ts文件，其中包含：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppModule} from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule { }

基本上，您的app.module.ts文件现在将与平台无关。然后，您将拥有适用于您的应用，浏览器环境和服务器环境的单独文件。

2）将NoopAnimationsModule导入app.server.module.ts，这样就不会在Node中抛出错误。

3）修改你的main.ts文件以引导AppBrowserModule而不是AppModule

经过大约2个小时的搜索，这是唯一对我有用的解决方案。

需要Angular中的BrowserAnimationsModule，但在Universal中会出错

1 个答案: