Benötigen BrowserAnimationsModule in Angular aber gibt Fehler in Universal

Question

Hallo Ich benutze Angular, die das BrowserAnimationsModule verwendet. Auf der universellen Serverseite gibt es jedoch den Fehler "Dokument ist nicht definiert".

Weil Universal BrowserAnimationsModule nicht unterstützt Ich brauche eine Möglichkeit, den Server BrowserAnimationsModule zu ignorieren und es durch NoopAnimationsModule zu ersetzen.

Dies ist, was ich gerade habe, aber es funktioniert nicht. Andere Methoden sind ebenfalls willkommen.

let imports = [ 
    BrowserModule.withServerTransition({appId: 'ang4-seo'}), 
    FormsModule, 
    HttpModule, 
    routes 
]; 

if(isPlatformBrowser(PLATFORM_ID)){ 
    imports.push(BrowserAnimationsModule); 
} 

@NgModule({ 
    imports: imports, 

Gibt es Möglichkeiten, dies zu lösen?

Answer 1

Ich hatte genau das gleiche Problem. Der volle Kredit geht an this fork on github from pquarme.

Im Grunde, was Sie tun müssen, ist:

1) Entfernen Sie alle Verweise auf BrowserAnimationsModule von app.module.ts und eine separate app.browser.module.ts-Datei erstellen, die enthält:

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 { } 

Grundsätzlich ist Ihre app.module.ts-Datei jetzt plattformunabhängig. Dann haben Sie separate Dateien für Ihre App, Ihre Browserumgebung und Ihre Serverumgebung.

2) Importieren Sie NoopAnimationsModule in Ihr app.server.module.ts, damit Sie keine Fehler in Node werfen.

3) Ändern Sie bitte Ihre main.ts Datei AppBrowserModule Bootstrap statt AppModule

Nach etwa 2 Stunden des Suchens, war dies die einzige Lösung, die für mich gearbeitet.