NG05100:Providers from`BrowserModule` have already been loaded.If you need access to common directives such as NgIf import the `CommonModule` instead

Question

I am getting above error even though I have imported CommonModule in all related modules having NgIf or NgFor and BrowserModule is only imported once in app.module.ts

What else I can do please help me. Angular version Error Message

Also I have migrated my project to be standalone component still it is not resolved as I read some solution like this also.

Configuration

Answer 1

I had same issue.

My issue was because I was importing the [BrowserAnimationsModule](https://github.com/angular/angular/blob/main/packages/platform-browser/animations/src/module.ts#L34) which is re-exporting BrowserModule.

I removed it from app.module and imported it where I needed it.

BTW if you are using Angular 17 with bootstrapApplication, you can remove this module and use provideAnimations().

Ovaritis

This worked for me, thanks. I had to remove BrowserAnimationsModule from the import in the app.component.ts and use provideAnimations() from '@angular/platform-browser/animations' in the app.config.ts (using angular v17). – Gradate

FINALLY, this solved it for me. Having been looking for days now. – Sherlock

Answer 2

I had this issue in angular v.17.

in app.config.ts file I added provideAnimations() in providers.It's not related to CommonModule.

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()],
};

Catercousin

Answer 3

The BrowserAnimationModule also pulls the BrowserModule.

Remove the BrowserModule and you should be fine !

Command

I removed BrowserModule but still it is giving the same error. – Configuration