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

Question

您好，我正在使用使用 BrowserAnimationsModule 的 Angular。但是在通用服务器端它给出了错误 "document is not defined".

因为 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 文件修改为 bootstrap AppBrowserModule 而不是 AppModule

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

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

Need BrowserAnimationsModule in Angular but gives error in Universal

angular-universal

angular