Есть ли в Angular 7 способ решить, какой сервис использовать?

Question

Я создал проект Angular 7 с Ionic 4. В этом проекте у меня есть несколько сред, например, 'local' или 'firebase'.

В моем environment.ts это параметр, который соответствует строкамвыше.

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

Я создал модуль, позволяющий загружать мои службы с отложенной загрузкой, как описано в этой статье .Это выглядит следующим образом:

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

Далее у меня есть InjectionToken, в котором я заявляю, что предоставляю услугу в упомянутом выше модуле и использую фабрику, чтобы решить, какую службу использовать.

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 одинаковы в любом сервисном режиме.Это приводит меня к мысли о том, что другой сервис, который также никогда не будет доступен, все еще компилируется.

Так есть ли способ реализовать эту функцию, чтобы игнорировать фактически недоступный код?Так что, если я установлю 'local' в своем файле среды, служба firebase, а также зависимости никогда не будут включены в сборку?

Заранее спасибо!

Answer 1

1. Вы можете использовать условный импорт в зависимости от конфигурации вашей среды. Есть несколько способов сделать это, но простой может быть:

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

2. Вы также можете создать массив зависимостей (импорт) в файле среды и добавить их в импорт, например (подробнее здесь :

imports: [...environment.dependencies]

, где

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