NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Dropdown, DropdownItem, DropdownModule } from 'primeng/dropdown'; interface City { name: string; code: string; } @Component({ selector: 'app-dropdown', standalone: true, imports: [FormsModule,DropdownModule,BrowserAnimationsModule], templateUrl: './dropdown.component.html', styleUrl: './dropdown.component.css', providers: [] }) export class DropdownComponent implements OnInit{ cities: City[] | undefined; selectedCity: City | undefined; ngOnInit() { debugger; this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } }
core.mjs:6531 ERROR Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead. at new _BrowserModule (platform-browser.mjs:1258:13) at Object.BrowserModule_Factory [as useFactory] (platform-browser.mjs:1282:14) at Object.factory (core.mjs:3322:38) at core.mjs:3219:47 at runInInjectorProfilerContext (core.mjs:866:9) at R3Injector.hydrate (core.mjs:3218:21) at R3Injector.get (core.mjs:3082:33) at injectInjectorOnly (core.mjs:1100:40) at ɵɵinject (core.mjs:1106:42) at useValue (core.mjs:2854:73)
ERROR RuntimeError: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
at new _BrowserModule (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29844:13)
at Object.BrowserModule_Factory [as useFactory] (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29868:10)
at Object.factory (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3965:32)
at eval (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3886:35)
at runInInjectorProfilerContext (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2525:5)
at R3Injector.hydrate (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3885:11)
at R3Injector.get (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3778:23)
at injectInjectorOnly (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2634:36)
at ɵɵinject (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2640:59)
at useValue (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3610:67) {
code: 5100
}
No output file changes.
Application bundle generation complete. [0.878 seconds]
ERROR RuntimeError: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
at new _BrowserModule (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29844:13)
at Object.BrowserModule_Factory [as useFactory] (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29868:10)
at Object.factory (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3965:32)
at eval (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3886:35)
at runInInjectorProfilerContext (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2525:5)
at R3Injector.hydrate (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3885:11)
at R3Injector.get (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3778:23)
at injectInjectorOnly (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2634:36)
at ɵɵinject (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2640:59)
at useValue (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3610:67) {
code: 5100
}
ERROR RuntimeError: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
at new _BrowserModule (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29844:13)
at Object.BrowserModule_Factory [as useFactory] (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29868:10)
at Object.factory (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3965:32)
at eval (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3886:35)
at runInInjectorProfilerContext (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2525:5)
at R3Injector.hydrate (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3885:11)
at R3Injector.get (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3778:23)
at injectInjectorOnly (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2634:36)
at ɵɵinject (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2640:59)
at useValue (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3610:67) {
code: 5100
}
we want to show data in dropdown
I found usages of BrowserAnimationModule, when we are working with standalone ( usage of bootstrapApplication ), we need to import the animations using provideAnimations sample below!
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideClientHydration(),
provideHttpClient(withFetch()),
provideAnimations(), // <- Changed here
],
};
After this I removed all occurrences of BrowserAnimationsModule in the source code.
After that the errors went away!