错误错误：未捕获（承诺）：错误：BrowserModule已加载：角度6 [重复]答案

【问题标题】：ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded : angular 6 [duplicate]错误错误：未捕获（承诺）：错误：BrowserModule已加载：角度6 [重复]
【发布时间】：2019-02-27 17:49:49
【问题描述】：

我正在使用具有延迟加载概念的多个模块，但出现以下错误：

ERROR 错误：未捕获（承诺中）：错误：BrowserModule 已加载。如果您需要从延迟加载的模块访问常用指令，例如 NgIf 和 NgFor，请改为导入 CommonModule。错误：BrowserModule 已加载。如果您需要从延迟加载的模块中访问常用指令，例如 NgIf 和 NgFor，请改为导入 CommonModule。

app.module.ts

     import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app.routes';
import { CookieModule } from 'ngx-cookie';
/* Modules */
import { SharedModule } from 'shared/shared.module';

/* Components */
import { AppComponent } from './app.component';
/* Models */
import { User } from './shared/models/user';

// /* Services */
import { GlobalLoader } from './core/global-loader';
import { SecurityService } from './shared/services/security.service';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
   declarations: [
       AppComponent
   ],
   entryComponents: [], // Needed to declare dynamic components
   imports: [      
       BrowserModule,
       AppRoutingModule,
       CookieModule.forRoot(),                          
       SharedModule,
   ],
  exports: [
    SharedModule
  ],
   providers: [SecurityService,
       GlobalLoader,
       User],
   bootstrap: [AppComponent]
})
export class AppModule { }

shared.module.ts

    import { NgModule } from '@angular/core';
// import { FormsModule } from '@angular/forms';
// Small sample component used for dymanic tabs/accordion

/* Components */
import { SampleContent } from './components/sample-content';
import { AccordionCardComponent } from './components/accordion-card/accordion-card.component';
import { BannerComponent } from './components/banner/banner.component';
import { HeaderComponent } from './components/header/header.component';
import { SearchComponent } from './components/search/search.component';
import { TabCardComponent } from './components/tab-card/tab-card.component';
import { TableCardComponent } from './components/table-card/table-card.component';
import { Base64Pipe } from './pipes/base64.pipe';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UXStyleguideModule } from 'ux-angular-styleguide';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// import { RouterModule } from '@angular/router';
/* Shared */
@NgModule({
    declarations: [
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [
        HttpClientModule,
        FormsModule,
        CommonModule,
        NgxDatatableModule,
        FlexLayoutModule,
        UXStyleguideModule],
    providers: [],
    exports: [
        HttpClientModule,
        FlexLayoutModule,
        NgxDatatableModule,
        FormsModule,
        CommonModule,
        UXStyleguideModule,
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ]
})
export class SharedModule { }

我没有在任何地方导入该 browserModule，但仍然出现错误。

提前致谢。

【问题讨论】：

标签： javascript angular typescript lazy-loading angular-module

【解决方案1】：

在 app.module.ts 中

Import {BrowserModule} from '@angular/platform-browser';

在共享模块中：

import { CommonModule } from '@angular/common';

从 Shared 中删除 BrowserModule。从 app.module 中移除 CommonModule

【讨论】：

错误还是一样。感谢您的努力，还有什么我应该尝试的吗？
您可以检查任何库包是否正在导入 BrowserModule。使用“BrowserModule”进行全局搜索
我已根据您建议的更改更新了问题
实际上我使用的库之一是导入 BrowserModule，我已从我的代码中删除了该库。

【解决方案2】：

在我的情况下，我发现当在 app-routing-module.ts 中导入一些模块 loadChildren 时，问题开始了，我仍然不知道如何调整它。

loadChildren: () => import(`./home/home.module`).then(m => m.HomeModule)

或

 loadChildren: './home/home.module#HomeModule'

【讨论】：

你能找到任何解决方案吗？
是的，小心“路由模块”和“模块”文件上的导入/导出模块。您可能已经看到，某些核心模块不能在您的项目中多次加载。 @Premalatha
@VinyciusOliveira！你能解决上面的问题吗！从 2 天开始，我也被困住了。

【解决方案3】：

文件shared.module.ts的最后一行：

从 '@angular/platform-browser' 导入 { BrowserModule }；

删除它，错误就会消失。

【讨论】：

我已根据您建议的更改更新了问题
stackoverflow.com/questions/39286667/…

【解决方案4】：

您必须按照以下步骤执行此操作，

1) 从App.module 中删除CommonModule 并添加到Shared.module

2) 将 BrowserModule 从 Shared.module 中移除并放入 App.module

这是一个例子

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

// import { MaterialModule } from '@angular/material';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app.routes';
import { CookieModule } from 'ngx-cookie';
/* Modules */
import { SharedModule } from 'shared/shared.module';

/* Components */
import { AppComponent } from './app.component';
/* Models */
import { User } from './shared/models/user';

// /* Services */
import { GlobalLoader } from './core/global-loader';
// import { SecurityService } from './services/security.service';
// import { ServiceGroupService } from './services/service-group.service';

/* Shared */
// import { Base64Pipe } from './shared/base64.pipe';
import { SecurityService } from './shared/services/security.service';
 import { BrowserModule } from '@angular/platform-browser';
// import { RouterModule } from '@angular/router';
@NgModule({
    declarations: [
        AppComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [      
        BrowserModule,
        AppRoutingModule,
        CookieModule.forRoot(),
        FormsModule,                    
        SharedModule,
    ],
    providers: [SecurityService,
        GlobalLoader,
        User],
    bootstrap: [AppComponent]
})
export class AppModule { }

和Shared.module

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// Small sample component used for dymanic tabs/accordion

/* Components */
import { SampleContent } from './components/sample-content';
import { AccordionCardComponent } from './components/accordion-card/accordion-card.component';
import { BannerComponent } from './components/banner/banner.component';
import { HeaderComponent } from './components/header/header.component';
import { SearchComponent } from './components/search/search.component';
import { TabCardComponent } from './components/tab-card/tab-card.component';
import { TableCardComponent } from './components/table-card/table-card.component';
import { Base64Pipe } from './pipes/base64.pipe';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UXStyleguideModule } from 'ux-angular-styleguide';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
/* Shared */
@NgModule({
    declarations: [
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [
        HttpClientModule,
        FormsModule,
        CommonModule,
        NgxDatatableModule,
        FlexLayoutModule,
        UXStyleguideModule],
    providers: [],
    exports: [
        FlexLayoutModule,
        NgxDatatableModule,
        // FormsModule,
        UXStyleguideModule,
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ]
})
export class SharedModule { }

【讨论】：

错误还是一样。感谢您的努力，还有什么我应该尝试的吗？
不需要在“shared.module”导出数组中添加HttpClientModule、FormsModule、RouterModule，也可以从“App.module”导出数组中移除SharedModule。
问题还是一样
可能是您导入了错误的内容。否则您将面临仅由“BrowserModule”和“CommonModule”引起的问题。
我已根据您建议的更改更新了问题

【解决方案5】：

这是因为如果您在 html 文件中使用了 *ngFor 和 *ngIf ，则必须导入 import { CommonModule } from '@angular/common'; 在模块中。所以尝试将它导入到你的模块中。

【讨论】：

【解决方案6】：

如果您使用的是材料模块，请务必删除 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

【讨论】：