Angular 16动画模块在Stackblitz中引发NG05100错误

问题原因 #

在Angular 16+的独立组件架构中，BrowserAnimationsModule和NoopAnimationsModule内部包含了BrowserModule的核心提供者，但bootstrapApplication启动应用时已经默认加载了BrowserModule的必要内容，直接在组件或应用中导入这两个模块会导致重复注入，触发"Providers from the BrowserModule have already been loaded"错误。

解决步骤 #

• 放弃在组件imports中添加BrowserAnimationsModule或NoopAnimationsModule，改用Angular提供的提供者函数配置动画。
• 具体配置方式：
  1. 启用真实动画：在main.ts中导入provideAnimations，并添加到bootstrapApplication的providers数组里。
  2. 使用无操作动画（仅占位）：导入provideNoopAnimations，同样添加到providers数组。

示例代码（main.ts） #

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations() // 替代BrowserAnimationsModule
    // 若用noop动画则替换为：provideNoopAnimations()
  ]
});

组件中正常使用动画 #

组件内无需额外导入模块，直接在@Component的animations属性中定义动画即可：

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div [@fadeToggle]="show" (click)="show = !show">点击切换显示</div>
  `,
  animations: [
    trigger('fadeToggle', [
      state('true', style({ opacity: 1, transform: 'scale(1)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.8)' })),
      transition('* <=> *', animate('300ms ease-in-out'))
    ])
  ]
})
export class AppComponent {
  show = true;
}

关键说明 #

独立组件模式下，Angular用提供者函数替代了传统NgModule的导入方式，provideAnimations和provideNoopAnimations会安全地注入动画所需的服务，避免与默认加载的BrowserModule内容冲突，同时保证动画功能正常工作。

内容的提问来源于stack exchange，提问作者Optiq