Question

我正在使用angular构建我的项目。我要在构建项目后更改API端点。为此，我在assets文件夹中创建了一个JSON文件，所有服务文件都从该文件读取数据。构建项目后，还可以更改JSON文件中的数据。但是问题是 core.module.ts 中需要API端点，该端点在加载JSON文件之前执行。因此，JSON文件中的数据始终是未定义的。是否可以在 core.module.ts 之前加载JSON文件，这样就不会出现问题。

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注入令牌是运行代码的最佳方法。您需要加入应用程序的初始化过程并进行加载。为此，您必须在app.module.ts文件中创建AppConfig：

 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

在加载核心模块之前阅读JSON文件

1 个答案: