在 Angular 中需要 BrowserAnimationsModule 但在 Universal 中出现错误

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 小时的搜索，这是唯一对我有用的解决方案。