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

一次（在根模块或核心模块中）。

仅导入这些提到的模块一次（仅在应用程序模块中）：

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

Answer 4

我的问题是我在我的根

BrowserModule

和功能模块使用的

AppModule

中导入了

SharedModule

。我将其从

SharedModule

中删除，然后一切又恢复正常了。

Answer 5

就我而言，我必须从子模块的导入中删除 NoopAnimationsModule。在 APPModule 中，我从 Angular 导入它，但从未在导入中使用过。 在 app.module.ts 中

import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    ...
  ],
  providers: [
    
  ],
  bootstrap: [AppComponent]
})