BrowserModule 已经加载答案

【问题标题】：BrowserModule has already been loadedBrowserModule 已经加载
【发布时间】：2019-05-13 10:27:17
【问题描述】：

这是我的代码：

 import { CommonModule } from '@angular/common';
    import { HttpClientModule } from '@angular/common/http';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { AuthGuard } from './shared';

    import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
    import { HeaderComponent } from './layout/components/header/header.component';

    @NgModule({
        imports: [
            CommonModule,
            BrowserAnimationsModule,
            HttpClientModule,
            LanguageTranslationModule,
            AppRoutingModule

        ],
        declarations: [AppComponent,HeaderComponent,SidebarComponent],
        providers: [AuthGuard],
        bootstrap: [AppComponent],
        exports: [
            HeaderComponent,
            SidebarComponent
      ],

    })
    export class AppModule {}

我不知道为什么会出现这个异常：

错误：BrowserModule 已加载。如果您需要访问来自延迟加载模块的常见指令，例如 NgIf 和 NgFor，改为导入 CommonModule。错误：BrowserModule 已经加载。如果您需要访问常用指令，例如 NgIf 和 NgFor 从延迟加载的模块中导入

在未来的模块中，我导入 CommonModule 而不是 BrowerModule。谁能帮帮我？

【问题讨论】：

您在您的AppModule 中导入了CommonModule。这需要是BrowserModule。
问题是你正在导入 CommonModule 和 BrowserAnimationsModule。 BrowserAnimationsModule 内部导出 BrowserModule 和 CommonModule 导出由 BrowserModule 重新导出。根据您的要求使用其中任何一个。
@SachinJagtap 我删除了 CommonModule，然后我就不管了。把我的 child.module 放到 commonModule 里面，还是不行。
你能展示你导入的子模块吗？

标签： angular angular-ui-router angular7 lazy-loading

【解决方案1】：

只导入一次BrowserAnimationsModule 和HttpModule（在根模块或核心模块中）。

仅将这些提到的模块导入一次（仅在 app-module 中）：

BrowserModule、BrowserAnimationsModule、LazyLoadImageModule（如果使用）、CarouselModule（如果使用）、InfiniteScrollModule（如果使用）、HttpModule（如果使用）

【讨论】：

是的，我只导入了一次
你检查对了吗？
是的，我使用 BrowserAnimationsModule 和 HttpModule 之类的术语在源文件夹中进行了研究，我读到有结果的文件是 app.module。也许有一些导入浏览器模块的js库？
如果 js 库发出 npm install browsermodule --save 则安装
我也遇到了这个错误，在经历了很多痛苦和折磨之后，BrowserAnimationsModule 只有在 app.module.ts 中导入时才能正常工作。有谁知道为什么？我认为角度模块是完全独立的。

【解决方案2】：

仅在AppModule 中导入BrowserAnimationsModule，因为BrowserAnimationsModule 默认导入BrowserModule，无需在app.module.ts 中定义BrowserModule，然后在您的子/特色模块中导入CommonModule。

 @NgModule({
imports:      [ 
                BrowserAnimationsModule
                ]
})    
export class ParentModule {}

特色/子模块

    @NgModule({
           imports:      [ CommonModule ]
     })   
export class FeaturedModule {}

希望这能解决你的问题

【讨论】：

【解决方案3】：

在您的 AppModule 中将 CommonModule 替换为 BrowserModule。

import { BrowserModule} from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';

import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
import { HeaderComponent } from './layout/components/header/header.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        LanguageTranslationModule,
        AppRoutingModule

    ],
    declarations: [AppComponent,HeaderComponent,SidebarComponent],
    providers: [AuthGuard],
    bootstrap: [AppComponent],
    exports: [
        HeaderComponent,
        SidebarComponent
  ],

})
export class AppModule {}

【讨论】：

你把CommonModule换成BrowserModule并导入了吗？
是的！我复制了你的代码，但它不起作用！我要疯了
您是否在 AppModule 以外的其他模块中导入 BrowserAnimationsModule ？
不！我检查仅在 app.module 中导入 BrowserAnimationsModule，在其他模块中未导入（与 BrowserModule 相同）
有时您可能会导入一个正在导入 BrowserModule 的库包。也检查一下。