在Angular中需要BrowserAnimationsModule，但在通用中給出錯誤

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

我有這個完全相同的問題。全額抵免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小時的搜索後，這只是爲我工作的解決方案。