Why does my import work in some modules but in others it throws: Error: Providers from the BrowserModule have already been loaded

Question

My app is split into several modules: AppModule, CoreModule, RecordModule.

The imports of my AppModule are:

AppRoutingModule,
CoreModule,
RecordModule

So, both of my other modules, as well as the app's routing. The imports of the CoreModule are:

CommonModule,
MatButtonModule,
MatIconModule,
MatOrientedNavModule,
MatSidenavModule,
MatTabsModule,
RouterModule

It contains the <router-outlet>, hence the RouterModule, it contains an async pipe, which the CommonModule is required for, and it uses a couple material components with their respective module imports. The MatOrientedNavModule is a custom module from a library. Its imports are:

MatButtonModule,
MatRippleModule,
MatTabsModule

Also just a buch of material components. Finally, the RecordModule contains the following imports:

RecordRoutingModule

So, just its own routing, which is then imported in the AppModule.

Now, I have another custom library module, MatLoadingScreenModule, which has the following imports:

BrowserAnimationsModule,
MatBackdropModule,
MatProgressSpinnerModule

If I import the MatLoadingScreenModule in either my AppModule or my CoreModule and add its <mat-loading-screen> component in the corresponding HTML-template, it works and I can see the loading screen I've implemented. However, I have to use it in my RecordComponent, but if I import it in there, I'm getting the runtime error:

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.

Awkwardly enough, no module imports the BrowserModule, but I guess it's part of the BrowserAnimationsModule? I've read you should only import the BrowserAnimationsModule in your AppModule, but then why does it work in the CoreModule? The only difference I can see is that the component of the CoreModule, wb-sidenav is added directly to the template of my AppComponent, while the RecordComponents are inserted via the routing. But then again, I fail to see why this would make any difference to the Module imports.

What is going on here? And how can I fix this? How can I import the MatLoadingScreenModule to use it in my RecordModule?

Answer 1

BrowserAnimationsModule is also pulling the BrowserModule.

You should remove that import from this module. BrowserAnimationsModule should only be imported in the root module.