需要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.我将留下以下解决方案以防万一它有一天再次工作并更新,如果我找到另一个解决方案.

原始答案:

我遇到了同样的问题.完全归功于来自pquarme的github上的这个分支.

你需要做的是:

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