需要Angular中的BrowserAnimationsModule,但在Universal中会出错

发布时间：2020-12-17 18:01:08 所属栏目：安全来源：网络整理

导读：嗨,我使用的是使用BrowserAnimationsModule的Angular.但在通用服务器端,它给出错误“文档未定义”. 因为Universal不支持BrowserAnimationsModule,我需要一种方法让服务器忽略BrowserAnimationsModule并用NoopAnimationsModule替换它. 这就是我现在所拥有的,

嗨,我使用的是使用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,

有什么方法可以解决这个问题吗？

解决方法

编辑：此解决方案似乎不适用于版本6.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个小时的搜索,这是唯一对我有用的解决方案.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!