使用来自外部设置文件的数据初始化Angular Router

Question

我正在开发应用程序，不确定将在哪里部署它。我需要能够使应用程序路由从外部设置文件中的前缀动态地动态添加。

我们正在将其部署到子位置的测试环境中工作。但是，当我们尝试导航到hostname/sublocation时，所有路由都将失败，因为它试图使用根位置（我们不可用）。

我设计了一个具有location_prefix设置的app.config.json文件，并创建了一个使用app.module中的APP_INITIALIZER加载的服务。但是，它返回一个错误消息，提示Cannot read property 'location_prefix' of undefined。

我们还验证了服务器配置，并确认服务器设置正确。

config-loader.json

/** Loader for configuration file values */
@Injectable()
export class ConfigLoader {

    /** Application configuration */
    static configuration: ConfigFile;

    /** Initializes a new instance of the {@link ConfigLoader} class */
    constructor(private httpClient: HttpClient) { }

    load() {
        const configUrl = 'app.config.json';

        return new Promise<void>((resolve, reject) => {
            this.httpClient.get(configUrl).toPromise().then((config: ConfigFile) => {
                ConfigLoader.configuration = config;
                resolve();
            }).catch(reason => {
                reject(`Unable to load settings file '${configUrl}': ${JSON.stringify(reason)}`);
            });
        });
    }
}

app.module.ts：

@NgModule({
  declarations: [...],
  imports: [
    AppRoutingModule,
    ...
  ],
  providers: [
    ConfigLoader,
    {
      provide: APP_INITIALIZER,
      useFactory: (configLoader: ConfigLoader) => configLoader.load(),
      deps: [ConfigLoader], multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.module

const prefix = ConfigLoader.configuration.location_prefix;
const routes: Routes = [
  { path: prefix, redirectTo: `${prefix}landing-page`, pathMatch: 'full' },
  { path: `${prefix}landing-page`, component: LandingPageComponent }
];

@NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
export class AppRoutingModule {
}

我希望能够导航到hostname/sublocation并看到主要路线。同样，由于在配置路由器之前未填充ConfigLoader.configuration，我再次遇到错误。