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

Posted 2023-02-19

【中文标题】在 Angular 中需要 BrowserAnimationsModule 但在 Universal 中出现错误

【英文标题】：Need BrowserAnimationsModule in Angular but gives error in Universal

【发布时间】：2017-11-03 23:02:27

【问题描述】：

您好，我正在使用使用 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,

有没有办法解决这个问题？

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

【讨论】：

这里是 NoopAnimationsModule 导入的样子（不得不谷歌它）： import NoopAnimationsModule from '@angular/platform-b​​rowser/animations';

angular 11 有新的修复方法吗？