浏览器模块已经被加载过了。

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已被加载。如果您需要从延迟加载的模块中访问常见指令，例如NgIf和NgFor，请改为导入CommonModule。Error: BrowserModule已被加载。如果您需要从延迟加载的模块中访问常见指令，例如NgIf和NgFor，请改为导入

在未来的模块中，我将导入CommonModule而不是BrowerModule。有人可以帮我吗？

- Postilla

---

你的 AppModule 中已经导入了 CommonModule，但需要替换为 BrowserModule。 - Poul Kruijt

问题在于您正在导入CommonModule和BrowserAnimationsModule。BrowserAnimationsModule内部导出BrowserModule，而CommonModule的导出被BrowserModule重新导出。根据您的需求使用它们中的任何一个即可。 - Sachin Jagtap

@SachinJagtap 我删除了CommonModule，只留下了它。在我的child.module中加入了CommonModule，但仍然无法工作。 - Postilla

你能展示一下导入子模块的代码吗？ - Sachin Jagtap

Answer 1

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

仅在应用程序模块中导入这些模块：

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

- Shubham

---

是的，我只导入了它们一次。 - Postilla

你检查过了吗？ - Shubham

是的，我正在源文件夹中进行一个关于BrowserAnimationsModule和HttpModule的研究，我发现结果在app.module文件中。也许有一些JS库导入了BrowserModule？ - Postilla

然后安装如果JS库问题npm install browsermodule -- save。 - Shubham

我也遇到了这个错误，经过长时间的痛苦和折磨，只有在app.module.ts中导入BrowserAnimationsModule才能正常工作，没有任何投诉。有人知道为什么吗？我以为Angular模块是完全独立的。 - mozpider

Answer 2

只需要在AppModule中导入BrowserAnimationsModule，因为BrowserAnimationsModule默认会导入BrowserModule，不需要在app.module.ts中定义BrowserModule，然后在您的子/特色模块中导入CommonModule。请保留HTML标记。

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

特色/子模块

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

希望这能解决你的问题。

- RajuPedda

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

- Denuka

---

你是否已经用BrowserModule替换了CommonModule并导入它？ - Denuka

是的！我复制了你的代码，但它不起作用！我快疯了。 - Postilla

你是否在除了AppModule之外的其他模块中导入了BrowserAnimationsModule？ - Denuka

不！我检查了一下，只有在 app.module 中导入了 BrowserAnimationsModule，在其他模块中没有导入（与 BrowserModule 相同）。 - Postilla

有时候你可能会导入一个库包，而这个库包又导入了Browser模块。也要检查一下这个。 - Denuka

@Denuka，关于您最后一条评论有关导入相同模块的库的问题，如果重复的模块来自库包，我们应该如何修复它？ - Sofía

Answer 4

我的问题是我在根模块AppModule和特性模块使用的SharedModule中都导入了BrowserModule。我从SharedModule中移除了它，这样就可以正常工作了。

- R. Salisbury

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]
})

- jose

Answer 6

我的应用程序使用独立模块，当我将BrowserAnimationsModule添加到我的导入列表中时，我也遇到了这个错误。

我已经导入了CommonModule，显然它已经包含了这个模块，所以我只需要移除BrowserAnimationsModule，然后一切都正常工作，包括我的动画效果。

- Chris Barr