2

I have an app that was originally developed with Angular 6 and has been running fine in production for over two years. This week I started incrementally updating it to the most recent stable version using the Angular Update Guides.

Moving from 6 to 7 went flawlessly but trying to go from 7 to 8 has been a pain. Following the guide went well; the only thing that I had to do not included in the guide is move away from ng4-loading-spinner to ngx-loading-spinner. The app compiles and loads eager modules without issue but all lazy loaded modules (the ones I can navigate to without logging in) throw a "BrowserModule has already been loaded" exception.

I've found all the related questions and answers here about only importing the BrowserModule once and even removed a few imports from my app module that may have been importing BrowserModule as well (including the ngx-loading-spinner).

Questions:

  1. Is there a known issue with updating from 7 to 8 whose resolution is eluding me?
  2. If not, how can I track down the culprit?

Stack trace:

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:4394)
    at _createClass (core.js:30461)
    at _createProviderInstance (core.js:30426)
    at initNgModule (core.js:30332)
    at new NgModuleRef_ (core.js:31561)
    at createNgModuleRef (core.js:31544)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:44911)
    at NgModuleFactory_.create (core.js:46088)
    at MapSubscriber.project (router.js:6383)
    at MapSubscriber._next (map.js:29)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
ChiefTwoPencils
  • 13,548
  • 8
  • 49
  • 75
  • Are there any lazy modules that are importing BrowserModule? Because even if you have removed module imports from app module that have been importing BrowserModule, the lazily loaded modules are not imported in the app module and they might be separately importing the BrowserModule, so this might also be an issue. – Dame Lyngdoh Jul 24 '20 at 03:10
  • No, there's only the one. – ChiefTwoPencils Jul 24 '20 at 04:08

2 Answers2

2

Answers:

  1. I don't think it's a known issue whose resolution is eluding you.

  2. You can track down the culprit by debugging it like below:

enter image description here

Here are the steps:

  • reproduce the error

  • put breakpoint at the error place

  • reproduce it again

  • jump to createNgModuleRef by using Call Stack

  • check moduleType value and jump directly to that NgModule

  • find BrowserModule in imports array

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Great instructions. I knew what module it was based on the route but `BrowserModule` isn't in the imports there (only `CommonModule`) so it must be from a dependency; that's what I was hoping to track down. A full text search at the root finds just a single import for browser. – ChiefTwoPencils Jul 24 '20 at 17:08
  • Hey @ChiefTwoPencils, were you able to track down the issue? The same thing is happening with me no BrowserModule import still I'm getting this error. – Keyur Sakaria Jan 20 '21 at 08:41
  • @KeyurSakaria, I started removing modules until I found it. IIRC, it was one added during the update that I overlooked and I ended up finding an alternative to that dependency. Who knows why anyone would release something that broken? – ChiefTwoPencils Jan 20 '21 at 18:00
0

Have you updated the routing modules to use the new syntax?

Angular 7 syntax

loadChildren: 'path/your.module#YourModule'

becomes Angular 8 syntax

loadChildren: () => import('path/your.module').then(m => m.YourModule)

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60