0

I'm trying to use lazy load one of my modules.

When navigating to the module I'm getting this 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

I've removed BrowserModule and CommonModule from my project completely! but still getting this error. Maybe some other module still use it (@angular/material?).

Any suggestions?

ranbuch
  • 1,222
  • 14
  • 12
  • Can you share module code? – hbamithkumara Nov 24 '19 at 09:16
  • 1
    Maybe it is an implicit usage. Do you use `BrowserAnimationsModule` somewhere? Angular Material itself does not include it in its modules. – ChrisY Nov 24 '19 at 09:16
  • [This](https://stackoverflow.com/questions/45975675/lazy-loading-browsermodule-has-already-been-loaded/45979219) might help you. – hbamithkumara Nov 24 '19 at 09:18
  • Check [this](https://stackoverflow.com/questions/56110455/browsermodule-has-already-been-loaded) too – hbamithkumara Nov 24 '19 at 09:25
  • I am using `BrowserAnimationsModule` on my shared module. I'm importing the shared module to my lazy-loading module as well. – ranbuch Nov 24 '19 at 09:59
  • Try to load the `BrowserAnimationsModule` only once, e.g in your `AppModule`. – ChrisY Nov 24 '19 at 10:09
  • Importing `BrowserAnimationsModule` only on `AppModule` resolves in `Template parse errors: Can't bind to 'ngIf' . . .` – ranbuch Nov 24 '19 at 10:15
  • This is an indication that you need to import the `CommonModule` in the modules where the error occurs. I guess in your `SharedModule`. You can import it in multiple modules, without having to worry about. – ChrisY Nov 24 '19 at 10:20
  • @ChrisY importing `CommonModule` solves this problem but I'm still getting `BrowserModule has already been loaded` when trying to load the lazy module. – ranbuch Nov 24 '19 at 10:33
  • Then I'm stuck too. Maybe you can narrow down the error-causing module by removing module by module from the imports in your AppModule. – ChrisY Nov 24 '19 at 10:48
  • the imports array contains only `HttpClientModule` `SharedModule` and some other self-written modules. Removing `HttpClientModule` caused an error. – ranbuch Nov 24 '19 at 11:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202971/discussion-between-chrisy-and-ranbuch). – ChrisY Nov 24 '19 at 12:30

1 Answers1

3

Solved.

On my SharedModule I had some third party modules that where using BrowserModule like: RecaptchaModule, RecaptchaFormsModule and BrowserAnimationsModule.

Since I'm using SharedModule on my lazy-module the BrowserModule must have re-loaded when I was navigating to the lazy-load route.

I'm importing RecaptchaModule and RecaptchaFormsModule only on the relevant module.

I'm importing BrowserAnimationsModule to my AppModule.

I'm importing and exporting CommonModule on my SharedModule.

I still do not import BrowserModule (directly) anywhere.

Thank you for your help @ChrisY.

ranbuch
  • 1,222
  • 14
  • 12