在 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屋！