Angular App Init Function Router Navigate View Doesn't Change

I have an application initialization function that is supposed to initialize some services, then direct to /home. If any of these function throws an exception, the router is supposed to direct to /error instead. All of these functions return Observable.

Unfortunately, while the resolvers for home fire, it does not actually display the home component.

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);
})
)
}


The app routing hasn't been updated to the newer syntax yet, so here is the 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 {

}


And for completeness, here's the 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 { }


Here are the two defined routes:

{
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,
},
},


It's hitting the various guards and resolvers, and changing the URL, but NOT displaying the content of HomeComponent. Navigation to /error works fine.

Can anyone help?

Continue reading...