BrowserModule 已加载错误答案

【问题标题】：BrowserModule has already been loaded ErrorBrowserModule 已加载错误
【发布时间】：2017-01-10 05:33:30
【问题描述】：

我已将我的应用程序更新到 RC6，现在我不断收到此错误：

zone.js:484 Unhandled Promise 拒绝：BrowserModule 已经已加载。如果您需要访问常用指令，例如 NgIf 和来自延迟加载模块的 NgFor...

我正在使用延迟加载，我的应用程序被分解为许多延迟加载的模块。但是在 RC5 中一切正常。

我设法在 RC6 的更新日志中找到的唯一更改是：

编译器：抛出无效 NgModule 的描述性错误消息提供者

但由于我在 RC5 中没有看到任何错误，这可能不适用于此处。

我有点没有想法，所以非常感谢任何帮助。

【问题讨论】：

我最后不得不导入AppRoutingModule，这解决了我的错误。但无法弄清楚其中的原因。

标签： angular typescript

【解决方案1】：

我已经设法解决了我的问题。我使用的库之一是导入BrowserModule。

我将把问题留在这里，以防有人遇到同样的问题。

【讨论】：

这就是全部。您应该只导入一次 BrowserModule。您导入的其他模块应该导入 CommonModules。
@FilipLauc 我也遇到了同样的问题，你找到解决方案了吗？
嗯，是的，我使用的一个库正在导入 BrowserModule，而它本应导入 CommonModule
我面临同样的问题，我的库之一已在其中导入浏览器模块，我也无法更改它需要做什么？
您好，我已经完成了整个线程中的所有操作，从子模块中删除了BrowserAnimationModule 和BrowserModule，仅在主模块中引用。然后我评论了BrowserModule 仍然没有运气。谁能告诉我如何知道哪些库正在使用BrowserAnimation 模块？

【解决方案2】：

由于错误描述是不言自明的，因此您要为其实现延迟加载的模块不应导入BrowserModule，因为它已在之前已导入（主要在 app.component 中）。您应该只导入一次BrowserModule。其他模块应该导入CommonModules。

看下面的代码理解

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; //<-- This one 

import { SearchMovieMainComponent } from './search-movies-main.component';

@NgModule({
    imports: [
        CommonModule //<-- and this one 
    ],
    declarations: [
        SearchMovieMainComponent
    ]
})
export class SearchMoviesMainModule {
}

注意：这不是我自己的答案。我面临着同样的问题。我自己有一个 CommonModule 与 angular one 同名。所以这对我来说确实是一个问题，因为我不知道还有另一个 CommonModule 存在于 angular 本身中。我发现这个blog 很有帮助。从那里发布答案。

【讨论】：

【解决方案3】：

我认为您使用的是“NoopAnimationsModule”或“BrowserAnimationsModule”，其中已经包含“BrowserModule”并懒惰地加载您的模块。所以解决方案是在“app.module.ts”中将 BrowserModule 替换为“NoopAnimationsModule”或“BrowserAnimationsModule”。

import { Router } from '@angular/router';
import { AdminsModule } from './admins/admins.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
//import { BrowserModule } from '@angular/platform-browser';
import { NgModule,OnInit } from '@angular/core';
import { AppComponent } from './app.component'; 
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
    //BrowserModule,
    NoopAnimationsModule,
    FormsModule
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

【讨论】：

这应该是答案:)
我的问题有点不同。实际上，我在 AppModule 中保留了 BrowserAnimationModule 和 BrowserModule 没有任何问题。问题是我在复制 BrowserAnimationModule。
但是如果我需要 BrowserModule.withServerTransition() (SSR) 函数和 noopAnimationModule 怎么办？
如果有人使用共享模块加载动画也可能发生。您应该从共享模块中删除 BrowserModule。
我发现如果在app.module.ts中同时导入BrowserAnimationsModule和BrowserModule（需要withServerTransition），应用就可以正常运行。不确定是否同样适用于 Noop。在 ng 版本 7.2

【解决方案4】：

就我而言，我在每个使用材料设计的组件中都使用了 BrowserAnimationsModule，我删除了对“BrowserAnimationsModule”的所有引用，并将 BrowserAnimationsModule 放在主模块中。

BrowserAnimationsModule 包含 BrowserModule，这就是问题所在。

【讨论】：

【解决方案5】：

我遇到了一个类似的问题。我有几个延迟加载模块，它们都使用 BrowserAnimationModule（包括 BrowserModule）。

我的解决方案首先是将这个模块的导入从子模块移动到根模块，作为 app.module.ts。

//app.module.ts
@NgModule({
    declarations: [  ],
    imports: [    BrowserAnimationsModule,]

第二步很重要，你还应该在每个子模块中包含CommonModule。

//lazychild.module.ts
@NgModule({
  declarations: [  ],
  imports: [  CommonModule,]

【讨论】：

【解决方案6】：

我通过在我的app.component.ts 中使用它解决了这个问题：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  imports: [
..,
    BrowserAnimationsModule,
  ],

并将其从其他任何地方删除。

【讨论】：

【解决方案7】：

如此处所述 Angular Issues Page 您可以创建一个 Shared Module 并在其中添加所有导入，然后在您创建新模块的任何地方导入该模块。

【讨论】：

【解决方案8】：

没有一个答案对我有用。

对于仍在寻找答案的人，如果您正在使用 SharedModule（和延迟加载），我的答案可能会对您有所帮助。

解决方案：将以下导出：BrowserModule、BrowserAnimationsModule、HttpModule 和 HttpClientModule（来自 SharedModule）移动到 AppModule 中的导入。

例子：

OLD shared.module.ts：

@NgModule({
   declarations: [],
   imports: [],
   exports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      // ...
   ]
})
export class SharedModule { }

旧 app.module.ts：

@NgModule({
   declarations: [
      AppComponent,
   ],
   imports: [
      SharedModule
   ],
   providers: [],
   exports: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

新的 shared.module.ts：

@NgModule({
   declarations: [],
   imports: [],
   exports: [
      // ...
   ]
})
export class SharedModule { }

新的 app.module.ts：

@NgModule({
   declarations: [
      AppComponent,
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      SharedModule
   ],
   providers: [],
   exports: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

【解决方案9】：

已解决 BrowserModule 已加载问题

在我的项目中，我直接在另一个子模块中导入了一个自己的模块，而没有在共享模块中提及，这就是它导致错误的原因。

【讨论】：

【解决方案10】：

删除所有“BrowserAnimationsModule”的导入，除了来自 AppModule。

【讨论】：