Прочитайте файл JSON перед загрузкой основных модулей

Question

Я использую Angular для создания моего проекта.Я хочу изменить конечную точку API после сборки проекта.Для этого я создал файл JSON в папке активов, и все служебные файлы считывают данные из этого файла.Данные в файле JSON также можно изменить после создания проекта.Но проблема в том, что конечная точка API требуется в core.module.ts , который выполняется до загрузки файла JSON.Таким образом, данные из файла JSON всегда неопределены.Можно ли загрузить файл JSON до core.module.ts , чтобы не возникало проблем.

Файл JSON

{
    "env": {
         "name": "dev"
    },
    "apiServer": {
        "url": "/api"
    }
}

app.config.ts

export class AppConfig {
    constructor(private http: Http) {}

    load() {
        const jsonFile = `assets/config/config.${environment.name}.json`;
        return new Promise<void>((resolve, reject) => {
            this.http.get(jsonFile).toPromise().then((response: Response) => {
                AppConfig.settings = response.json();
                resolve();
             }).catch((response: any) => {
                 reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
             });
        });
    }
}

app.module.ts

export function initializeApp(appConfig: AppConfig) {
    return () => appConfig.load();
}

providers: [
    AppConfig,
    { provide: APP_INITIALIZER,
    useFactory: initializeApp,
    deps: [AppConfig], multi: true },
    { provide: APP_BASE_HREF, useValue: '/' },
]

Answer 1

Токен впрыска APP_INITIALIZER - лучший способ запустить ваш код.Вам нужно подключиться к процессу инициализации приложения и загрузить.Для этого вам необходимо создать AppConfig в файле app.module.ts:

 export function appConfigFactory(provider: AppConfig): Function {  
  return () => provider.load();
}



  providers: [
    HttpModule,
    StartupService,
    Title,
    {
      provide: APP_INITIALIZER,
      useFactory:appConfigFactory,
      deps: [AppConfig],
      multi: true
    }

Итак, я рекомендую вам прочитать:

https://devblog.dymel.pl/2017/10/17/angular-preload/

https://www.cicoria.com/ensuring-initializing-and-server-side-configuration-with-angular/

Чтобы понять больше, прочитайте это:

https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/ https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e