无法读取未定义的属性“initialNavigation” - Angular v4 AoT答案

【问题标题】：Cannot read property 'initialNavigation' of undefined - Angular v4 AoT无法读取未定义的属性“initialNavigation” - Angular v4 AoT
【发布时间】：2017-04-22 03:52:58
【问题描述】：

我在尝试将 AoT 改装到现有应用程序时遇到了一些问题。我收到此错误：

Cannot read property 'initialNavigation' of undefined
RouterInitializer.webpackJsonp.1.RouterInitializer.isLegacyDisabled

这大概是我的 AppModule 的样子：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      enableTracing: true,
      initialNavigation: true,
    }),
  ],
  declarations: [
    AppComponent,
  ],
  exports: [
    AppComponent,
  ],
  providers: [
    Http,
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: configServiceFactory,
      multi: true,
      deps: [Http, ConfigService],
    },
  ],
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule { }

似乎路由器未定义，并且当此代码路径运行时路由器选项未定义：RouterInitializer.isLegacyDisabled，从路由器模块中的appInitializer调用。

我现在不知道该怎么做。我觉得在 APP_INITIALIZER 承诺完成之前，路线已经解决了。

这在 JIT 中似乎可以正常工作，但 AOT 复杂性本身就会出错。如果您需要更多详细信息，请告诉我。

编辑：如果我注释掉 APP_INITIALIZER，看起来我可以克服错误。但是我注意到路由器也用它来初始化，有什么方法可以让路由器等待我先初始化？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

APP_INITIALIZER 引起了这个问题，因为路由器现在挂在它上面。

解决方案是根本不使用它来引导配置，路由器可以通过将其设置 initialNavigation 更改为 false 来手动启动它。

RouterModule.forRoot(routes, {
  initialNavigation: false,
}),

所以我将 APP_INITIALIZER 提供程序移到 app.component.ts 中

constructor(
    private router: Router,
    private http: Http,
    private configService: ConfigService,
) {
    // initialise routes once config is loaded
    configServiceFactory(http, configService).subscribe(() => router.initialNavigation());
}

注意：configServiceFactory 基本上是这样的：

return http.get('config.json') // or your remote config service
    .map(m => m.json())
    .do(config => configService.setAppConfig(config)) // store it somewhere
    .catch(err => {
        console.error('Error getting config for app initialisation', err);
        return err;
    });

【讨论】：