BrowserModule 已經被加載錯誤

Question

我已將我的應用程序更新到 RC6，現在我不斷收到此錯誤：

zone.js:484 未處理的 Promise 拒絕：BrowserModule 已加載。 如果您需要從延遲加載的模塊中訪問常用指令，例如 NgIf 和 NgFor...

我正在使用延遲加載，並且我的應用程序被分解為許多延遲加載模塊。 然而在 RC5 中一切正常。

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

編譯器：為無效的 NgModule 提供程序拋出描述性錯誤消息

但由於我在 RC5 中沒有看到任何錯誤，這可能不適用於這里。

我有點想法，所以非常感謝任何幫助。

Answer 1

我認為您正在使用“NoopAnimationsModule”或“BrowserAnimationsModule”，它們已經包含“BrowserModule”並懶惰地加載您的模塊。 所以解決方案是在你的“app.module.ts”中用“NoopAnimationsModule”或“BrowserAnimationsModule”替換BrowserModule。

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

Answer 2

我已經設法解決了我的問題。 我使用的庫之一是導入BrowserModule 。

如果有人有同樣的問題，我會把問題留在這里。

Answer 3

就我而言，我在每個使用 Material Design 的組件中都使用了 BrowserAnimationsModule，我刪除了對“BrowserAnimationsModule”的所有引用，並將 BrowserAnimationsModule 放在主模塊中。

BrowserAnimationsModule 包含了 BrowserModule，這就是問題所在。

Answer 4

沒有一個答案對我有用。

對於仍在尋找答案的人，如果您使用的是SharedModule （和延遲加載），我的答案可能會對您有所幫助。

解決方案：將以下導出： BrowserModule 、 BrowserAnimationsModule 、 HttpModule和HttpClientModule （來自 SharedModule）移動到AppModule中的導入。

示例：

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

Answer 5

由於錯誤描述是不言自明的，您要為其實現延遲加載的模塊不應導入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同名的CommonModule 。 所以這對我來說真的是一個問題，因為我不知道還有另一個CommonModule存在於 angular 本身中。 我發現這個博客很有幫助。 從那里發布答案。

Answer 6

我遇到了一個類似的問題。 我有幾個延遲加載模塊，它們都使用 BrowserAnimationModule（包括 BrowserModule）。

我的解決方案首先是將此模塊的導入從子模塊移動到根模塊作為 app.module.ts。

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

第二步非常重要，您還應該在每個子模塊中包含 CommonModule 。

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

Answer 7

我通過在我的app.component.ts使用它解決了這個問題：

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

並將其從其他任何地方刪除。

Answer 8

如此處Angular 問題頁面所述，您可以創建一個Shared Module並在其中添加所有導入，然后在您創建新模塊的任何地方導入該模塊。

Answer 9

除了 AppModule 之外，還刪除所有“BrowserAnimationsModule”的導入。

Answer 10

解決了 BrowserModule 已加載問題

在我的項目中，我直接在另一個子模塊中導入了一個 ownmodule，而沒有在共享模塊中提及，這就是為什么它會導致錯誤。