Angular中如何从打包文件中排除不必要的服务？

问题根源 #

你之前用@Injectable({providedIn: 'root', useFactory: ...})的方式无法排除服务，是因为providedIn: 'root'会把服务强制注册到根注入器，即使没被实际使用，打包工具也会认为它是被引用的，无法Tree-Shake掉。

具体解决方案 #

1. 调整服务的注入声明

给两个实现类TestAService、TestBService去掉providedIn: 'root'，只保留@Injectable()装饰器，避免它们被默认注册到根注入器：

// test-a.service.ts
@Injectable()
export class TestAService implements TestCommonService {
  abstract doSomething(): void;
}

// test-b.service.ts
@Injectable()
export class TestBService implements TestCommonService {
  abstract doSomething(): void;
}

2. 用条件工厂+动态导入实现按需引入

在模块的providers配置中，结合环境变量的编译时常量特性，通过动态导入的方式只加载选中的服务。因为Angular构建时会把environment里的常量直接替换，Tree-Shaker能识别并删除未执行的代码分支：

// app.module.ts
import { NgModule } from '@angular/core';
import { TestCommonService } from './test-common.service';
import { environment } from '../environments/environment';

const testServiceFactory = () => {
  if (environment.useServiceA) {
    // 仅当useServiceA为true时，才引入TestAService
    const { TestAService } = require('./test-a.service');
    return new TestAService();
  } else {
    const { TestBService } = require('./test-b.service');
    return new TestBService();
  }
};

@NgModule({
  providers: [
    {
      provide: TestCommonService,
      useFactory: testServiceFactory
    }
  ]
})
export class AppModule {}

3. 替代方案：条件导入模块

你也可以把两个服务分别封装到独立模块中，再根据环境变量条件导入对应模块，生产构建时未被导入的模块会被直接排除：

// test-a.module.ts
@NgModule({
  providers: [{ provide: TestCommonService, useClass: TestAService }]
})
export class TestAModule {}

// test-b.module.ts
@NgModule({
  providers: [{ provide: TestCommonService, useClass: TestBService }]
})
export class TestBModule {}

// app.module.ts
@NgModule({
  imports: [
    environment.useServiceA ? TestAModule : TestBModule
  ]
})
export class AppModule {}

关键注意事项 #

• 必须使用生产构建命令：ng build --prod（Angular 12+用ng build --configuration production），开发构建不会启用完整的Tree-Shaking优化。
• 确保两个实现类没有被项目中其他无关代码引用，否则Tree-Shaker无法移除它们。

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