0

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

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

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

我创建了一个模块，以允许我的服务按照本文所述进行延迟加载。它看起来如下：

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

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

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 服务以及依赖项永远不会包含在构建中？

提前致谢！

4

1 回答 1

1
  1. 您可以根据您的环境配置使用条件导入。有多种方法可以做到这一点，但一种简单的方法可以是：
@NgModule({
  imports: [ 
       BrowserModule,
       environment.userApi == 'firebase' ? AngularFireAuthModule : []
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}
  1. 您还可以在您的环境文件中创建一个依赖项（导入）数组并将它们添加到导入中，例如（在此处查看更多信息：
imports: [...environment.dependencies]

在哪里

//environment.ts
dependencies = [
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebase)
];
于 2019-04-17T13:39:50.513 回答