Angular独立组件导入BrowserAnimationsModule触发NG05100错误

开发Angular独立组件DropdownComponent时，导入BrowserAnimationsModule后触发NG05100错误，错误提示如下：

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.

错误日志 #

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
}

原组件代码 #

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' }     ];   }  } 

解决方法 #

• 移除独立组件中BrowserAnimationsModule的导入：BrowserAnimationsModule包含BrowserModule的提供者，这些提供者只能在应用中加载一次，不能在独立组件中重复导入。
• 若需使用NgIf、NgFor等通用指令，在组件的imports数组中添加CommonModule。
• 在应用根模块（如app.module.ts）或者独立应用的bootstrap配置中导入BrowserAnimationsModule，确保全局仅加载一次。

修改后的组件代码 #

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DropdownModule } from 'primeng/dropdown';

interface City {
  name: string;
  code: string;
}

@Component({
  selector: 'app-dropdown',
  standalone: true,
  imports: [CommonModule, FormsModule, DropdownModule],
  templateUrl: './dropdown.component.html',
  styleUrl: './dropdown.component.css',
  providers: []
})
export class DropdownComponent implements OnInit{
  cities: City[] | undefined;
  selectedCity: City | undefined;

  ngOnInit() {
    this.cities = [
      { name: 'New York', code: 'NY' },
      { name: 'Rome', code: 'RM' },
      { name: 'London', code: 'LDN' },
      { name: 'Istanbul', code: 'IST' },
      { name: 'Paris', code: 'PRS' }
    ];
  }
}

根模块配置示例（若使用NgModule） #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownComponent } from './dropdown/dropdown.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropdownComponent // 导入独立组件
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Akash Singh Rawat