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!!!!
