App Shell not generated when wildcard route (not found page) is presented in app

Yea, I'm struggling with the Angular app-shell as I have a wildcard in my app routes. My project is a standalone Angular project. How can we solve this?

app.config.server.ts file:

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { ROUTES } from '@angular/router';
import { AppShellComponent } from './app-shell/app-shell.component';

const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
{
provide: ROUTES,
multi: true,
useValue: [
{
path: 'shell',
component: AppShellComponent,
},
],
},
],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);


I also experienced that if I use the APP_INITIALIZER and try to redirect to an error page (based on our logic), App-shell navigates to that error page and embeds that page into our HTML instead of embedding the app-shell page itself! How this can be resolved?!

app.config.ts file:

import { APP_INITIALIZER, ApplicationConfig, isDevMode } from '@angular/core';
import {
Router,
provideRouter,
withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { appRoutes } from './app.routes';

function initAppFactoryConfig(router: Router) {
return () => new Promise((resolve, reject) => {

// We resolve the promise whatsoever! Because we want the app to complete
// its initialization... BUT based on our logic (e.g., if the file we're
// trying to load at initialization, couldn't get loaded), we may like to
// redirect to one of our app's pages and then resolve... In this case
// app-shell embeds the error page into the HTML instead!
router.navigate(['/error-loading']);
resolve(true);
});
}

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
{
provide: APP_INITIALIZER,
useFactory: initAppFactoryConfig,
deps: [Router],
multi: true,
},
],
};

Continue reading...