在Angular中需要BrowserAnimationsModule但在Universal中却给出错误 [英] Need BrowserAnimationsModule in Angular but gives error in Universal

问题描述

我正在使用使用BrowserAnimationsModule的Angular.但是在通用服务器端，它会显示错误未定义文档".

Hi I am using Angular that uses the BrowserAnimationsModule. But in the universal server side it gives the error "document is not defined".

因为Universal不支持BrowserAnimationsModule，所以我需要一种使服务器忽略BrowserAnimationsModule并将其替换为NoopAnimationsModule的方法.

Because Universal doesn't support BrowserAnimationsModule I need a way to make the server ignore BrowserAnimationsModule and replace it with NoopAnimationsModule.

这是我现在所拥有的，但是它不起作用.也可以使用其他任何方法.

This is what I have right now but it's not working. Any other methods are welcome too.

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

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

@NgModule({
    imports: imports,

有什么办法可以解决这个问题?

Are there any ways to solve this?

推荐答案

此解决方案从6.1版开始似乎不起作用.我将保留下面的解决方案，以防有一天能再次使用，并在找到其他解决方案时进行更新.

this solution doesn’t appear to work as of version 6.1. I’ll leave the below solution in case it works again someday and update if I find another solution.

原始答案:

我遇到了完全相同的问题.完整的感谢来自 pquarme上github上的这个分支.

I was having this exact same problem. Full credit goes to this fork on github from pquarme.

您需要做的是:

1)从app.module.ts中删除对BrowserAnimationsModule的任何引用，并创建一个单独的app.browser.module.ts文件，其中包含:

1) Remove any reference to BrowserAnimationsModule from app.module.ts and create a separate app.browser.module.ts file which contains:

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文件现在将与平台无关.然后，您将为您的应用程序，浏览器环境和服务器环境创建单独的文件.

Basically your app.module.ts file will now be platform agnostic. Then, you'll have separate files for your app, your browser environment and your server environment.

2)将NoopAnimationsModule导入到app.server.module.ts中，以免在Node中引发错误.

2) Import NoopAnimationsModule to your app.server.module.ts so you don't throw errors in Node.

3)修改main.ts文件以引导AppBrowserModule而不是AppModule

3) Modify your main.ts file to bootstrap AppBrowserModule instead of AppModule

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

After about 2 hours of searching, this was the only solution that worked for me.

这篇关于在Angular中需要BrowserAnimationsModule但在Universal中却给出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！