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

我不知道為什么我會得到這個異常：

錯誤：BrowserModule 已加載。 如果您需要從延遲加載的模塊訪問常用指令，例如 NgIf 和 NgFor，請改為導入 CommonModule。 錯誤：BrowserModule 已加載。 如果您需要從延遲加載的模塊中訪問常用指令，例如 NgIf 和 NgFor，請導入

在未來的模塊中，我導入CommonModule而不是BrowerModule 。 任何人都可以幫助我嗎？

Answer 1

僅導入BrowserAnimationsModule和HttpModule一次（在您的根模塊或核心模塊中）。

只導入這些提到的模塊一次（僅在 app-module 中）：

BrowserModule , BrowserAnimationsModule , LazyLoadImageModule (如果使用), CarouselModule (如果使用), InfiniteScrollModule (如果使用), HttpModule (如果使用)

Answer 2

在AppModule 中導入 BrowserAnimationsModule只是因為 BrowserAnimationsModule 默認導入 BrowserModule，無需在 app.module.ts 中定義 BrowserModule，然后在您的子/特色模塊中導入 CommonModule。

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

精選/子模塊

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

希望這能解決你的問題

Answer 3

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