Оболочка приложения не создается, когда в приложении представлен подстановочный маршрут (страница не найдена)
Да, я борюсь с оболочкой приложения Angular, поскольку в маршрутах моего приложения есть подстановочный знак. Мой проект является автономным проектом Angular. Как мы можем это решить?
app.config.server.ts
файл:
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);
Я также испытал это, если я используюAPP_INITIALIZER
и попытаемся перенаправить на страницу ошибки (на основе нашей логики), оболочка приложения перейдет на эту страницу ошибки и встроит эту страницу в наш HTML вместо встраивания самой страницы оболочки приложения! Как это можно решить?!
app.config.ts
файл:
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,
},
],
};