Angular独立项目：通配符路由下App Shell生成及重定向嵌入问题求助

问题1：路由含通配符时App Shell无法生成 #

原因 #

通配符路由（**）在服务器端渲染阶段会匹配所有请求路径，包括App Shell的默认生成路径/shell，导致Shell组件无法被正确匹配渲染。

解决方案 #

让通配符路由仅在客户端生效，服务器端渲染时跳过该路由，确保/shell路径能优先匹配到Shell组件。

修改你的路由配置文件（app.routes.ts）：

import { Routes } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
import { inject } from '@angular/core';
import { NotFoundComponent } from './not-found/not-found.component'; // 替换为你的404组件

export const appRoutes: Routes = [
  // 其他业务路由
  {
    path: '**',
    component: NotFoundComponent,
    // 仅在浏览器环境下激活该路由
    canActivate: [() => isPlatformBrowser(inject(PLATFORM_ID))]
  }
];

这样服务器端渲染App Shell时，通配符路由不会被触发，/shell路径能正常匹配到Shell组件，顺利生成App Shell。

问题2：APP_INITIALIZER重定向导致Shell嵌入错误页面 #

原因 #

服务器端渲染App Shell时，APP_INITIALIZER中的router.navigate会触发路由跳转，服务器端会渲染跳转后的错误页面，而非Shell组件。

解决方案 #

在APP_INITIALIZER的工厂函数中判断运行环境，仅在客户端执行重定向逻辑，服务器端跳过该操作。

修改app.config.ts中的初始化函数：

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

function initAppFactoryConfig(router: Router) {
  return () => new Promise((resolve, reject) => {
    // 仅在浏览器环境下执行重定向
    if (isPlatformBrowser(inject(PLATFORM_ID))) {
      router.navigate(['/error-loading']);
    }
    resolve(true);
  });
}

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

服务器端渲染Shell时不会执行重定向，确保生成的HTML是Shell组件内容；客户端初始化时则正常执行业务逻辑的重定向。

内容的提问来源于stack exchange，提问作者Ali