Angular 7 中有没有办法在编译时决定使用哪个服务？答案

【问题标题】：Is there a way in Angular 7 to decide at compile time which service to use?Angular 7 中有没有办法在编译时决定使用哪个服务？
【发布时间】：2019-09-07 18:22:23
【问题描述】：

我使用 Ionic 4 创建了一个 Angular 7 项目。在这个项目中，我有多个环境，例如“本地”或“火力基地”。

在我的 environment.ts 中是一个参数，对应于上面的字符串。

export const environment = {
  production: false,
  ...,
  userApi: 'firebase'
};

我创建了一个模块来允许我的服务延迟加载，如this article 中所述。它看起来如下：

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebase),
  ]
})
export class UserApiModule { }

接下来我有一个 InjectionToken，我在其中声明我在上面提到的 Module 中提供服务，并使用工厂来决定使用哪个 Service。

export const USER_SERVICE = new InjectionToken<AbstractUserService>('USER_SERVICE',
    {
        providedIn: UserApiModule,
        factory: UserApiFactory
    }
);

function UserApiFactory(): AbstractUserService {
    switch (environment.userApi) {
        case 'firebase':
            return new FirebaseUserService(inject(AngularFireAuth));
        case 'mock':
            return new MockUserService();
        default:
            throw new Error('UserService implementation not found');
    }
}

这个解决方案通常可以正常工作。在“firebase”模式下，会加载 firebase 服务，在“local”模式下会加载本地服务。

但是在“prod”模式下编译和提供服务时，ChromeDev-Tools 中的包大小在任一服务模式下都是相同的。这让我想到，另一个服务也永远无法访问，但仍在编译。

那么有没有办法实现这个功能来忽略有效无法访问的代码？所以如果我在我的环境文件中设置“本地”，firebase 服务以及依赖项永远不会包含在构建中？

提前致谢！

【问题讨论】：

标签： angular ionic-framework build tree-shaking

【解决方案1】：

您可以根据您的环境配置使用条件导入。有多种方法可以做到这一点，但一种简单的方法可以是：

@NgModule({
  imports: [ 
       BrowserModule,
       environment.userApi == 'firebase' ? AngularFireAuthModule : []
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

您还可以在环境文件中创建一组依赖项（导入）并将它们添加到导入中，例如（查看更多 here:

imports: [...environment.dependencies]

在哪里

//environment.ts
dependencies = [
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebase)
];

【讨论】：