问题
I am getting the following error despite having taken steps to remove. Can someone tell me what am I missing here ?
Error:
ERROR Error: Uncaught (in promise): 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.
The following are my modules:
App Module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from
'@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { enableProdLogger } from '@cst/cst-components/cst-service';
// Enums
import { environment } from '../environments/environment';
// App components
import { AppComponent } from './app.component';
// Header navbar
import { HeaderNavbarComponent } from './header-navbar/header-navbar.component';
// Home components
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// Pipes
import { PipesModule } from './core/pipes';
// App routings
import { AppRoutingModule } from './app-routing.module';
//rwa modules
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { TimeoutModule } from './timeout';
import { CustomerHoldingsModule } from './customer-holding/customer-holding.module';
import { ProductAdminModule } from './product-admin/product-admin.module';
import { StaffModule } from './staff/staff.module';
import { CstModule } from '@cst/cst-components';
import { OAuthModule } from 'angular-oauth2-oidc';
if (environment.production === true) {
enableProdLogger();
}
@NgModule({
declarations: [
AppComponent,
HeaderNavbarComponent,
// Home components
HomeComponent,
DashboardComponent,
],
imports: [
CstModule.forRoot(),
OAuthModule.forRoot(),
BrowserModule,
HttpClientModule,
PipesModule,
TimeoutModule,
//routing module
AppRoutingModule,
//rwa modules
CoreModule,
SharedModule,
CustomerHoldingsModule,
ProductAdminModule,
StaffModule,
CstModule
],
providers: [
],
bootstrap: [AppComponent],
schemas: []
})
export class AppModule {
}
Shared Module
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { CommonModule } from "@angular/common";
import { UtilityService } from "./utility-service.service";
import { CstModule } from "@cst/cst-components";
import { RouterModule } from "@angular/router";
@NgModule({
declarations: [
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
CstModule,
RouterModule
],
providers: [
UtilityService
],
exports: [
FormsModule, ReactiveFormsModule, CstModule, RouterModule
]
})
export class SharedModule {
}
Core Module
import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
import { PageNotFoundComponent } from "../statics/page-not-found.component";
import { HelpMePageComponent } from "../statics/help-me.component";
import { CstShowDirective } from "./directives/cst-show.directive";
import { CstModule } from "@cst/cst-components";
import { OAuthModule } from "angular-oauth2-oidc";
import { Options, Logger, AutoSaveFactory, localStorageProvider } from "@cst/cst-components/cst-service";
import { ZoneService } from "./providers/zone.service";
import { CstWindow } from "./providers/window.service";
import { LOGIN_GUARD_PROVIDER } from "./providers/logged-in-guard";
import { DEFAULT_INTERCEPTOR } from "./providers/custom.http.provider";
import { VCardService } from "./providers/vcard.service";
import { TimeoutService } from "../timeout/timeout.service";
import { AppConfigService, startupServiceFactory } from "./providers/app-config.service";
import { BasicLoginComponent } from "./login-basic/basic-login.component";
import { BasicLoginService } from "./login-basic/login.service";
import { CommonModule } from "@angular/common";
@NgModule({
declarations: [
// Login components
BasicLoginComponent,
// Custom directives
CstShowDirective,
// Static pages components
PageNotFoundComponent,
HelpMePageComponent,
],
imports: [
CommonModule,
CstModule.forRoot(),
OAuthModule.forRoot()
],
providers: [
{ provide: Options, useValue: { store: false } },
Logger,
ZoneService,
CstWindow,
LOGIN_GUARD_PROVIDER,
DEFAULT_INTERCEPTOR,
AutoSaveFactory,
localStorageProvider(),
// Custom services
VCardService,
BasicLoginService,
TimeoutService,
AppConfigService,
{
provide: APP_INITIALIZER,
useFactory: startupServiceFactory,
deps: [AppConfigService],
multi: true
}
],
exports: [
CstModule,
OAuthModule
],
schemas: []
})
export class CoreModule { }
Customer Holdings Module
import { NgModule } from "@angular/core";
import { CustomerHoldingEnquiryComponent } from "./customer-holding-enquiry/customer-holding-enquiry.component";
import { SharedModule } from "../shared/shared.module";
import { CustomerHoldingErrorReportComponent } from "./customer-holding-error-report/customer-holding-error-report.component";
import { CustHoldingUnvalidatedCinComponent } from "./customer-holding-error-report/unvalidated-cin/ch-unvalidated-cin.component";
import { CustHoldingCinChangeUpdateComponent } from "./customer-holding-error-report/cin-change-update/ch-cin-change-update.component";
import { CustHoldingCisProductUpdateExceptionComponent } from "./customer-holding-error-report/cis-product-update-exception/ch-cis-prdt-update-excptn.component";
import { CustHoldingReconExceptionComponent } from "./customer-holding-error-report/cust-holding-recon-exception/ch-recon-exception.component";
import { CustHoldingProductGroupingExceptionComponent } from "./customer-holding-error-report/cust-holding-product-grouping-exception/ch-prdt-grouping-excptn.component";
import { CustomerHoldingComponent } from "./customer-holding.component";
import { CustomerHoldingService } from "./customer-holding-services/customer-holding-service.service";
import { CustomerHoldingRoutingModule } from "./customer-holding-routing.module";
import { CommonModule } from "@angular/common";
@NgModule({
declarations:[
//Enquiry component
CustomerHoldingEnquiryComponent,
//Error Report Components
CustomerHoldingErrorReportComponent,
CustHoldingUnvalidatedCinComponent,
CustHoldingCinChangeUpdateComponent,
CustHoldingCisProductUpdateExceptionComponent,
CustHoldingReconExceptionComponent,
CustHoldingProductGroupingExceptionComponent,
//Base Component
CustomerHoldingComponent
],
imports:[
CommonModule,
SharedModule,
CustomerHoldingRoutingModule
],
exports:[],
providers:[CustomerHoldingService],
schemas: []
})
export class CustomerHoldingsModule{}
Product Admin Module
import { NgModule } from "@angular/core";
import { ProductAdminComponent } from "./product-admin.component";
import { ApprovedProductComponent } from "./approved/approved-product.component";
import { PendingActionComponent } from "./pending-action/pending-action.component";
import { ProductAdminService } from "./product-admin-services/product-admin-service.service";
import { SharedModule } from "../shared/shared.module";
import { CanceledProductComponent } from "./canceled/canceled-product.component";
import { PendingApprovalCancellationComponent } from "./pending-approval-cancellation/pending-approval-cancellation.component";
import { ProductAdminRoutingModule } from "./product-admin-routing.module";
import { CommonModule } from "@angular/common";
@NgModule({
declarations:[
ProductAdminComponent,
ApprovedProductComponent,
CanceledProductComponent,
PendingActionComponent,
PendingApprovalCancellationComponent
],
imports:[
CommonModule,
SharedModule,
ProductAdminRoutingModule
],
exports:[],
providers:[
ProductAdminService
],
schemas: []
})
export class ProductAdminModule{}
Staff Module
import { NgModule } from "@angular/core";
import { RequestManagementComponent } from "./request-management/request-management.component";
import { StaffAuditTrailComponent } from "./staff-audit-trail/staff-audit-trail.component";
import { StaffModuleComponent } from "./staff.component";
import { SharedModule } from "../shared/shared.module";
import { StaffModuleService } from "./staffModuleServices/staff-module.service";
import { StaffRoutingModule } from "./staff-module-routing.module";
import { CommonModule } from "@angular/common";
@NgModule({
declarations:[
RequestManagementComponent,
StaffAuditTrailComponent,
StaffModuleComponent
],
imports:[
CommonModule,
SharedModule,
StaffRoutingModule
],
exports:[],
providers:[
StaffModuleService
],
schemas: []
})
export class StaffModule{}
I have imported only CommonModule in all lazy loaded modules but still getting the error when I try to access lazy loaded modules.
Note: I am able to access base component that is AppComponent and the home route but not any of the lazy loaded routes.
Please help!!!!
回答1:
Looks like BrowserAnimationModule is causing problem since it already contain BrowserModule and loading your module lazily.
So move your BrowserAnimationModule to your app.module.ts or you can remove and test it.
来源：https://stackoverflow.com/questions/52860517/getting-browsermodule-already-loaded-despite-not-importing-it-in-lazy-loaded-mod