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.

Answer 1

The BrowserAnimationModule also pulls the BrowserModule.

Remove the BrowserModule and you should be fine !

Answer 2

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().

Answer 3

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()],
};