I have a problem since my application was migrated to Angular 12.
My application launches without error. When opening certain pages, I get this error :
core.js:6498 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.
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.
at new BrowserModule (platform-browser.js:1527:1)
at Object.BrowserModule_Factory [as factory] (platform-browser.js:1549:58)
at R3Injector.hydrate (core.js:11457:1)
at R3Injector.get (core.js:11276:1)
at core.js:11314:1
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (core.js:11314:1)
at new NgModuleRef$1 (core.js:25345:1)
at NgModuleFactory$1.create (core.js:25399:1)
at MapSubscriber.project (router.js:3680:1)
at resolvePromise (zone.js:1213:1)
at resolvePromise (zone.js:1167:1)
at zone.js:1279:1
at ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.js:28679:1)
at ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at drainMicroTaskQueue (zone.js:582:1)
I searched a lot on the internet, I checked that my application only loaded the BrowserModule once in App.module.ts (with BrowserAnimationsModule).
I noticed that the error pages are only those that use lazy loading. Routes declared without lazy loading are functional.
I figure the problem might be an external package that was already loading the BrowserModule.
But I can't get the ID.
My package.json :
"@angular/animations": "12.2.16",
"@angular/common": "12.2.16",
"@angular/compiler": "12.2.16",
"@angular/core": "12.2.16",
"@angular/forms": "12.2.16",
"@angular/platform-browser": "12.2.16",
"@angular/platform-browser-dynamic": "12.2.16",
"@angular/router": "12.2.16",
"@ng-select/ng-select": "^7",
"angular2-ie9-shims": "0.0.2",
"angular2-notifications": "12.0.0",
"chart.js": "^2.7.2",
"chartjs-plugin-datalabels": "^0.7.0",
"core-js": "2.5.4",
"exceljs": "1.10.0",
"file-saver": "1.3.8",
"flatpickr": "4.6.3",
"font-awesome": "4.7.0",
"geojson": "0.5.0",
"innersvg-polyfill": "0.0.2",
"jquery": "^3.4.1",
"jspdf": "^1.5.3",
"jszip": "3.1.5",
"karma-scss-preprocessor": "^4.0.0",
"leaflet": "1.3.4",
"leaflet-image": "^0.4.0",
"lodash": "4.17.11",
"moment": "2.29.1",
"moment-range": "^4.0.2",
"moment-timezone": "^0.5.25",
"ng-click-outside": "5.3.0",
"ng-recaptcha": "^8.0.1",
"ng2-dnd": "^5.0.2",
"ng2-file-upload": "1.4.0",
"ng2-validation": "4.2.0",
"ngx-bootstrap": "6.2.0",
"popper.js": "^1.15.0",
"rxjs": "^6.5.3",
"rxjs-compat": "6.3.2",
"smoothscroll-polyfill": "0.4.3",
"swiper": "^4.5.0",
"tablesorter": "^2.31.1",
"tooltip.js": "^1.3.1",
"tslib": "^2.0.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.11.4"
I also attempted to completely remove the BrowserAnimationsModule from App.module.ts. The error is still present.
I also did a search for AppModule in my project, it is only present in main.ts :
platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.log(err));
I no longer know where to look. do you see me giving me other avenues of research please? Thank you.
EDIT
This module is lazy loaded and it triggers the error
@NgModule({
imports: [
CommonModule,
AfpDatatableModule,
AfpCommonModule,
AfpSponsorDetectionRoutingModule,
DatalistModule,
AfpChartsModule
],
declarations: [
SponsorDetectionComponent,
SponsorDetectionFormComponent,
MultiBarChartGenericComponent,
SponsorDetectionTableComponent,
SuspectedRoamingCoherenceComponent
]
})
export class AfpSponsorDetectionModule {}
