如何懒加载Angular的BrowserAnimationsModule以缩减main.js体积？

首先需要明确：BrowserAnimationsModule本身是设计为根模块级别的依赖，你尝试的两种方式无法让动画正常工作，原因如下：

• 第一种方式仅加载了模块类，但未将其注册到Angular的模块注入体系中，使用动画的组件无法获取到所需的提供者。
• 第二种方式编译并创建了模块实例，但该实例的提供者不会合并到根注入器，而Angular动画系统依赖根注入器中的全局服务（如AnimationDriver），因此组件无法正常初始化动画。

下面是两种可行的解决方案：

方案一：使用Angular 14+ 异步动画提供者（推荐） #

Angular 14及以上版本提供了provideAnimationsAsync()，它会自动懒加载动画相关代码，仅当页面中实际使用动画时才加载对应的chunk，无需手动导入BrowserAnimationsModule。

基于Standalone组件/应用配置的写法 #

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideAnimationsAsync() // 替代BrowserAnimationsModule
  ]
};

基于NgModule的写法 #

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [provideAnimationsAsync()],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案二：动态在懒加载模块中导入（兼容旧版本Angular） #

根模块默认导入体积极小的NoopAnimationsModule（无动画的空实现），仅在需要使用动画的懒加载功能模块中导入BrowserAnimationsModule，这样动画相关代码会被打包到该懒加载模块的chunk中，不会增加main.js的体积。

根模块配置 #

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

@NgModule({
  imports: [BrowserModule, NoopAnimationsModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

懒加载功能模块配置 #

// feature/feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FeatureComponent } from './feature.component';

@NgModule({
  imports: [CommonModule, BrowserAnimationsModule],
  declarations: [FeatureComponent]
})
export class FeatureModule { }

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