Модуль Angular Dynamic Import Library с провайдерами - PullRequest
Новая
       33

Модуль Angular Dynamic Import Library с провайдерами

0 голосов
/ 30 сентября 2019

У меня есть файл модуля приложения в моем проекте Angular 7 как таковой. 

import { APP_INITIALIZER, InjectionToken, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ProjectAApisLibModule } from '@projecta/apis';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppAuthNService } from './auth/app-auth-n.service';
import { CoreModule } from './core/core.module';
import { AppConfig, ConfigService } from './core/core.services/config.service';
import { UserService } from './core/core.services/user.service';
import { DemoComponent } from './demo/demo.component';

// tslint:disable-next-line: variable-name (Ali: To not mixup with token name and variable name)
const ConfigDeps = new InjectionToken<(() => Function)[]>('configDeps');

export function LoadApplicationConfiguration(appConfig: ConfigService): Function {
  return () => appConfig.loadApplicationConfiguration();
}
export function VerifySSO(authService: AppAuthNService): Function {
  return () => authService.verifySSO();
}
export function InitializeUserInformation(userService: UserService): Function {
  return () => userService.initializeUserInfo();
}

 export function ConfigurationFactory(
   config: ConfigService,
   auth: AppAuthNService,
   userService: UserService,
   configDeps: (() => Function)[]
 ): () => Promise<any> {
   return (): Promise<any> => {
     return new Promise((resolve, reject) => {

         config.loadApplicationConfiguration()
         .then(_ => {

           // Return resolved Promise when dependant functions are resolved
           return Promise.all(configDeps.map(dep => dep()));
         })
         .then(() => {
           // resolve factory
           resolve();
         })
         .catch((exception) => {
           reject(exception);
         });
     });
   };
 }

@NgModule({
   declarations: [
      AppComponent,
      DemoComponent
   ],
   imports: [
      BrowserAnimationsModule,
      CoreModule,
      AppRoutingModule,
      ProjectAApisLibModule.withConfiguration(AppConfig.environment.apiUrl)
   ],
   providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: ConfigurationFactory,
        deps: [ConfigService, AppAuthNService, UserService, ConfigDeps],
        multi: true
      },
      {
         provide: ConfigDeps,
         // returns an array of dependant functions to be executed
         useFactory: (
         appConfig: ConfigService,
         authServ: AppAuthNService,
         userService: UserService
         ) => {
           return [
            LoadApplicationConfiguration(appConfig),
            VerifySSO(authServ),
            InitializeUserInformation(userService)
           ];
         },
         deps: [ConfigService, AppAuthNService, UserService]
       }
   ],
   bootstrap: [
      AppComponent
   ],
   entryComponents: [
      AppComponent
   ]
})
export class AppModule { }

Что он делает, это инициализирует некоторые данные во время инициализации приложения, такие как получение настроек приложения, проверка авторизации и получение информации о пользователе,У меня есть фабрика, чтобы сделать это в порядке, прежде чем разрешить все и позволить приложению продолжиться.

Как вы можете видеть, у меня также есть библиотека ProjectAApisLibModule, моя собственная библиотека, которая содержит службы для вызоваАпис в моем бэкэнде.

Дело в том, что переменная AppConfig, полученная из файла config.service, инициализируется Асинхронно , поэтому в строке 61 ProjectAApisLibModule.withConfiguration(AppConfig.environment.apiUrl) мне нужно подождать, чтобы получить ПРАВИЛЬНЫЕ свойства вAppConfig и отправьте ПРАВИЛЬНЫЙ apiUrl в модуль.

Я предполагаю, что динамический импорт - вот ответ, но я не мог понять, как реализовать это в моем коде.

, если вашинтересно, что withConfiguration это моя функция modulewithprovider, как таковая: 

export class ProjectAApisLibModule {

  static withConfiguration(
    apiUrlEndpoint: string,
    retryCount: number = 1
    ): ModuleWithProviders {
    return {
      ngModule: ProjectAApisLibModule,

      providers: [
        { provide: ENVIRONMENT_APIURL, useValue: apiUrlEndpoint},
        { provide: WITH_RETRIES, useValue: retryCount }
      ]
    };
  }
}

Возможно ли с моей реализацией до сих пор иметь возможность импортировать динамически после разрешения моей фабрики, но еще до инициализации приложения, так что яможно использовать библиотеку apis с правильной конфигурацией?

Дайте мне знать, если вам нужно что-нибудь еще. Вот мои версии пакета. 

Angular CLI: 7.3.9
Node: 10.16.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.9
@angular-devkit/build-angular      0.13.9
@angular-devkit/build-optimizer    0.13.9
@angular-devkit/build-webpack      0.13.9
@angular-devkit/core               7.3.9
@angular-devkit/schematics         7.3.9
@angular/cdk                       7.3.7
@angular/cli                       7.3.9
@angular/flex-layout               7.0.0-beta.24
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/webpack                   7.3.9
@schematics/angular                7.3.9
@schematics/update                 0.13.9
rxjs                               6.4.0
typescript                         3.2.4
webpack                            4.29.0
...