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

This issue has been created since 2022-11-22.

Which @angular/* package(s) are the source of the bug?

common, core, router

Is this a regression?

No

Description

I started this project 5/6 years ago with Angular 2+, till the NG 13 version everything is migrated well. Now I want to upgrade to NG 14/15, 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:

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
    }),
    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: [
    CommonModule,
    RouterModule,
    FormsModule,
    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 {}

Hope somebody can help me with this, I'm tried everything for weeks now!
Many thanks in advance!

Please provide a link to a minimal reproduction of the bug

not possible

Please provide the exception or error you saw

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

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.0.0
Node: 14.20.1
Package Manager: npm 6.14.17
OS: win32 x64

Angular: 15.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            12.2.12
@angular-devkit/schematics      12.2.12
@angular/pwa                    12.2.12
@schematics/angular             12.2.12
rxjs                            7.5.0
typescript                      4.8.2

Anything else?

No response

atscott wrote this answer on 2022-11-22

Please provide a minimal reproduction, either in stackblitz or a github repo. Without this, we cannot effectively determine the what's causing the issue.

patrickritskes wrote this answer on 2022-11-23

Please provide a minimal reproduction, either in stackblitz or a github repo. Without this, we cannot effectively determine the what's causing the issue.

Hey,
Thanks for your reply!

I will try to make a stackblitz for this, wich isn't easy at the moment!

atscott wrote this answer on 2022-11-23

@patrickritskes An approach that usually works is to gradually delete modules from your application until you get to a point where the error disappears. Then you'll know where the error is coming from and you can more easily make a minimal reproduction.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Error 'Target "RunTests" is not defined' when running `dotnet run` 4 2021-07-24 2022-09-24
textexpander와의 충돌 문제 0 2021-01-13 2022-09-22
タイマーの先のノートを消されると藍ちゃんが気絶する 0 2022-02-14 2022-11-29
Question: How to determine compression options used for ZipCrypto Deflate 6 2021-08-20 2022-10-29
Website crashes if files directory is not found 0 2021-01-28 2022-09-24
Kingston HyperX Cloud series gaming headset 18 2021-06-15 2022-11-05
Video don't restart after going back and forward 1 2021-08-12 2022-10-08
Create functional Set bridge 0 2022-08-02 2022-10-25
Liquidity issue with StabilityPoolBridge 0 2022-07-28 2022-10-25
[issue]: 错误:没有发现Ventoy启动盘 3 2021-10-20 2022-11-22
I and my friend work on similar project. lets connect! 1 2022-03-11 2022-11-01
signed'() appears not to be supported 0 2021-05-12 2022-10-14
some feature request about dozer annotation 0 2015-10-25 2022-10-17
[FEATURE] Infinite scroll 5 2022-02-09 2022-11-28
Nie odnaleziono klucza prywatnego zakodowanego za pomocą PEM 0 2022-09-07 2022-11-12
Q: Is documentation up to date? 1 2018-11-07 2022-11-24
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined 3 2021-04-20 2022-11-19
[Request] IMO (note- MSI installer only) 4 2022-02-25 2022-10-10
升级到1.9.0-0版本后,使用elementUI会报错提示 3 2021-07-29 2022-11-15
ReferenceError: db is not defined 0 2021-08-15 2022-10-28
"Show Quick Settings Panel" menu item should toggle to "Hide Quick Settings Panel" 4 2022-06-26 2022-10-05
Automatic switching of language/script issue with combining marks 5 2021-01-08 2022-11-22
[Feature request] Allow free things 5 2021-10-28 2022-09-28
Remove slide snap 1 2021-05-07 2022-01-13
number label does not change 3 2020-12-24 2022-11-21
Horizontal drag scroll 2 2020-07-15 2022-09-02
Problem with formatting negative numbers 3 2018-05-30 2022-11-08
Web page need help with a web store 0 2022-01-18 2022-02-03
Rizin cannot guess the calling convention correctly 1 2021-12-08 2022-10-06
Can't sync index of subcollection. 6 2022-04-11 2022-11-21
Upload HEIC files as images 3 2021-11-01 2022-10-06
[BUG] Does not open any versions 2 2022-04-18 2022-11-09
Translate IDDM to Java 0 2021-08-25 2021-12-30
Why can't test after deleting the training set 3 2022-11-21 2022-11-27
index.d.ts is missing for @pixi/unsafe-eval 1 2022-10-28 2022-11-28
Form: Focus on input inside form and press enter, will auto refresh page and jump to relevant target URL 2 2022-07-06 2022-09-29
`RandomLinkSplit` expects reverse edge types for heterogeneous undirected graphs 6 2022-05-18 2022-10-08
useMuiComponent from example fails 2 2022-07-04 2022-11-08
[Optimizer] Optimize duplicate aggregation nodes 0 2021-09-10 2022-11-09
ENH: Add option to resample data by a non-timeseries column (e.g. Price) 15 2022-04-17 2022-11-30
how to generate all combinations 5 2021-08-29 2022-11-12
创建 sys_file 表 id 设置太大 1 2021-02-23 2022-11-07
Update PHP supported version 9 2022-01-28 2022-10-05
Add GCash and Maya for the users in the Philippines 8 2021-09-18 2022-10-16
updater script 0 2021-04-12 2022-01-05
Maintenance status of this repository? 38 2020-07-28 2022-11-28
RPi4: Bluetooth crash while using BT keyboard 7 2019-12-19 2022-11-07
Hangs up when click Answer on notification and notification doesn't dismiss 13 2021-04-15 2022-11-15
No container for security release 4.0.6 6 2021-11-09 2022-09-12
[Bug]: Documentation issue https://jestjs.io/docs/setup-teardown 6 2022-04-05 2022-11-12