BrowserModule 已经加载

Question

这是我的代码：

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

我不明白为什么会出现这个异常：

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import

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

Answer 1

在您的 AppModule 中用 BrowserModule 替换 CommonModule。

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

Answer 2

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

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

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

Answer 3

Import BrowserAnimationsModule in AppModule only because BrowserAnimationsModule by default import BrowserModule, No Need to define BrowserModule in app.module.ts and then import CommonModule in your child / featured module.

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

Featured / Child Module

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

Hope, this solves your problem

BrowserModule 已经加载

BrowserModule has already been loaded

angular

angular-ui-router

angular7

lazy-loading