Upgrade NG13 -> NG14 Error: Providers from the `BrowserModule` have already been loaded

Question

I started this project 5 years ago with Angular 2+, till the NG 13 version everything is migrated well. No I want to upgrade to NG 14, but now this error is popping up when I navigate to any of my lazy loaded modules!

Error: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead. Error: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead

So to be clear in my shared.module.ts I have only imported the CommonModule! And in the app.module.ts there is only 1 Browser and BrowserAnimationsModule imported, also the shared module is imported within the imports: []!

I really don't have a clue what's going wrong here!

this is the app-routing.module.ts:

/* eslint-disable max-len */

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouteConfigLoadEnd, Router, RouterModule, Routes } from '@angular/router';
import { addDynamicPath } from './softpak/classes/dynamic-path';
import { LandingPageComponent } from './softpak/components/landing-page/landing-page.component';
import { MainComponent } from './softpak/components/main/main.component';
import { NotfoundComponent } from './softpak/components/notfound/notfound.component';
import { AuthGuard } from './softpak/guards/auth.guard';
import { DynamicPathGuard } from './softpak/guards/dynamic-path.guard';
import { LicenseGuard } from './softpak/guards/license.guard';
import { SecurityGuard } from './softpak/guards/security.guard';

const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      { path: '', component: LandingPageComponent, canActivate: [AuthGuard] },

      // Lazy loaded modules here!
      {
        path: 'accounting',
        canActivate: [AuthGuard, LicenseGuard],
        canActivateChild: [SecurityGuard],
        loadChildren: () => import('./applications/accounting/accounting.module').then(m => m.AccountingModule)
      },
      {
        path: 'general',
        canActivate: [AuthGuard, LicenseGuard],
        canActivateChild: [SecurityGuard],
        loadChildren: () => import('./applications/general/general.module').then(m => m.GeneralModule)
      },
      // etc.
    ]
  },
  { path: '404', component: NotfoundComponent },
  { path: '**', canActivate: [DynamicPathGuard], component: NotfoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      paramsInheritanceStrategy: 'always'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(private router: Router) {
    this.router.events.subscribe(routerEvent => {
      if (routerEvent instanceof RouteConfigLoadEnd) {
        addDynamicPath(this.router.config, routerEvent.route.path || '');
      }
    });
  }
}

this is the app.module.ts:

// imports here

// some of my components etc.
@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    MainComponent,
    ErrorComponent,
    LandingPageComponent,
    NavigationItemComponent,    
    NotfoundComponent,
    LogComponent,
    AttachmentsComponent,
    UpdateNotificationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    IntlModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production
    }),
    ThemeModule.forRoot({
      themes: [defaultTheme, lightTheme, darkTheme, customTheme],
      active: 'default'
    }),
    SharedModule
  ],
  providers: [
    // my services comes here
  ]
})
export class AppModule {}

This is the shared.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
// all my shared components here, some Kendo Components and other third party stuff


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
  ],
  declarations: [
    // my shared components here
  ],
  providers: [],
  exports: [
    RouterModule,
    ReactiveFormsModule,
    // my shared components here
  ]
})
export class SharedModule {}

This is the Accounting.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared.module';
import { AccountingRoutingModule } from './accounting-routing.module';
import { AccountingComponent } from './accounting.component';

@NgModule({
  imports: [CommonModule, SharedModule, AccountingRoutingModule],
  declarations: [AccountingComponent]
})
export class AccountingModule {}

And this is the general.module.ts:

// imports here
@NgModule({
  imports: [CommonModule, SharedModule, GeneralRoutingModule],
  declarations: [
    GeneralComponent,
    // the rest of my custom components here
  ]
})
export class GeneralModule {}

Answer 1

I use 'angular2-notifications' package.

I had imported SimpleNotificationsModule in AppModule and SharedModule. I used <simple-notifications [options]="options"></simple-notifications> in child component.

After update Angular version from 12 to 13 i had 'BrowserModule has already been loaded' error.

I removed SimpleNotificationsModule from SharedModule and error is gone. I had to move <simple-notifications [options]="options"></simple-notifications> to AppComponent

import { SimpleNotificationsModule } from 'angular2-notifications';

@NgModule({
  imports: [
    ...,
    SimpleNotificationsModule // removed this line
  ],
  exports: [
    ...,
    SimpleNotificationsModule // removed this line
  ],
})
export class SharedModule { }

import { SimpleNotificationsModule } from 'angular2-notifications';

@NgModule({
    imports: [
        SimpleNotificationsModule.forRoot() // left this line
    ]
})
export class AppModule { }