Angular 应用程序初始化功能路由器导航视图不会改变

Question

我有一个应用程序初始化函数，应该初始化一些服务，然后定向到/home。如果这些函数中的任何一个抛出异常，则路由器应该定向到 /error 。所有这些函数都返回 Observable。

不幸的是，虽然 home fire 的解析器，它实际上并没有显示 home 组件。

export const initApplication = (): (() => Observable<any>) => {

  const tokenService: TokenService = inject(TokenService);
  const propertiesService : PropertiesService = inject(PropertiesService);
  const authService: AuthService = inject(AuthService);
  const uiService: UiService = inject(UiService);
  const router: Router = inject(Router);

  // could use concat but this works
   return () => tokenService.init()
    .pipe(
      switchMap(() => propertiesService.init()),
      switchMap(() => authService.init()),
      switchMap(() => uiService.init()),
      tap(() => {
        console.log("attempting to navigate to /landing");
        //router.initialNavigation();
        router.navigate(["/home"])
      }),
      catchError((error) => {
        console.log(`Caught error, source: ${error.source}, error: ${JSON.stringify(error)}`);
        router.navigate(["/error"]);
        return of(undefined);
      })
     )
}

应用程序路由尚未更新为较新的语法，因此这里是 AppRoutingModule：

@NgModule({

  //imports: [RouterModule.forRoot(ROUTES, { initialNavigation: "enabledNonBlocking", useHash: true, onSameUrlNavigation: "reload", bindToComponentInputs: true, enableTracing: true })],
  //imports: [RouterModule.forRoot(ROUTES, { useHash: true, bindToComponentInputs: true, enableTracing: true })],
  imports: [RouterModule.forRoot(ROUTES, { initialNavigation: "disabled", useHash: true, onSameUrlNavigation: "reload", bindToComponentInputs: true })],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

为了完整起见，这是 AppModule：

@NgModule({ declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent],
    imports: [
        CommonModule,
        IconsModule,
        SVGIconModule,
        BrowserAnimationsModule,
        // third-party modules
        LoggerModule.forRoot({
            level: NgxLoggerLevel.TRACE
        }),
        AppRoutingModule,
        CoreModule,
        SprsSharedModule,
        SprsSharedKendoModule,
        ErrorMessageComponent,
        SprsContainerComponent,
        ServiceWorkerModule.register('ngsw-worker.js', {
            enabled: environment.production,
          // Register the ServiceWorker as soon as the application is stable
          // or after 30 seconds (whichever comes first).
          registrationStrategy: 'registerImmediately'
        })],
    providers: [
        // WARNING: Angular initializes APP_INITIALIZER concurrently, not consecutively. The factory
        // function is used to to control the chain of events needed to initialize the app, and
        // run them in the order required
        { provide: APP_INITIALIZER, useFactory: initApplication, multi: true },



    ] })
export class AppModule { }

以下是两条定义的路线：

  {
    path: 'home',
    title: 'Home',
    loadComponent: () => import('@modules/home/components/home/home.component').then(
      (c) => c.HomeComponent
    ),
    resolve: { homeText: homeResolver },
  //lazy loading of this component isn't implemented yet
  {
    path: 'error',
    title: 'Application Error',
    component: ApplicationErrorComponent,
  },
  },

它会访问各种防护程序和解析器，并更改 URL，但不显示 HomeComponent 的内容。导航到 /error 效果很好。

有人可以帮忙吗？

Answer 1

   imports: [
      RouterModule.forRoot(ROUTES, {
        initialNavigation: "enabledNonBlocking",
        useHash: true,
        onSameUrlNavigation: "reload",
        bindToComponentInputs: true,
        enableTracing: true // Optional for debugging routing behavior
      })
    ]

帮助解决的步骤：

1. 使用

   enableTracing

   启用导航跟踪来诊断路线 分辨率和导航问题
2. 使用 router.navigate 调用 setTimeout 以确保它们在所有同步代码之后执行

   APP_INITIALIZER

   完成。
3. 用最少的路线进行测试以隔离是否 问题是由于路由配置或初始化造成的 时机。