Error: BrowserModule has already been loaded

Question

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?

Maybe it is an implicit usage. Do you use BrowserAnimationsModule somewhere? Angular Material itself does not include it in its modules. — ChrisY
I am using BrowserAnimationsModule on my shared module. I'm importing the shared module to my lazy-loading module as well. — ranbuch

ranbuch ranbuch · Accepted Answer · 2019-11-24T21:34:42

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.

Error: BrowserModule has already been loaded

1 Answers