Angular 14多应用工作空间路由异常问题求助

核心问题出在父路由加载子模块的方式错误，以及子路由路径配置冗余，导致手动输入URL时路由匹配异常，同时单页应用的刷新机制也需要额外配置。

1. 修正父应用路由配置 #

父路由中不能直接将SubApp1Module作为component的值，模块需通过懒加载或嵌套路由导入的方式加载，推荐使用懒加载优化性能：

// 父应用 app-routing.module.ts
const routes: Routes = [
  // 懒加载子应用1
  {
    path: 'sub-app1',
    loadChildren: () => import('../projects/sub-app1/src/app/app.module').then(m => m.AppModule)
  },
  // 懒加载子应用2
  {
    path: 'sub-app2',
    loadChildren: () => import('../projects/sub-app2/src/app/app.module').then(m => m.AppModule)
  },
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  // 处理未匹配的路由，统一重定向到登录页
  {path: '**', redirectTo: 'login'}
];

2. 修正子应用路由配置 #

子路由的路径是基于父路由的相对路径，无需重复父级的sub-app1/sub-app2前缀，否则会形成/sub-app1/sub-app1这类无效路径：

// sub-app1 的 app-routing.module.ts
const routes: Routes = [
  // 空路径对应父路由的 /sub-app1，重定向到子应用默认组件
  {path: '', redirectTo: 'component1', pathMatch: 'full'},
  {path: 'component1', component: Component1Component},
  {path: 'component2', component: Component2Component}  
];

// sub-app2 的 app-routing.module.ts
const routes: Routes = [
  {path: '', redirectTo: 'component1', pathMatch: 'full'},
  {path: 'component1', component: Component1Component},
  {path: 'component2', component: Component2Component}  
];

3. 解决手动刷新的服务器配置问题 #

Angular是单页应用，手动刷新时浏览器会向服务器请求对应路径的文件，而服务器上不存在该文件，会返回404进而触发路由异常：

• 开发环境（ng serve）：确保angular.json中serve配置的baseHref正确：

"projects": {
  "parent-app": {
    "architect": {
      "serve": {
        "options": {
          "baseHref": "/",
          "deployUrl": "/"
        }
      }
    }
  }
}

• 生产环境部署：以Nginx为例，添加配置将所有请求重定向到index.html：

location / {
  try_files $uri $uri/ /index.html;
}

验证效果 #

修改后，手动输入https://localhost:4200/sub-app1会先匹配父路由的sub-app1，加载子应用模块，再通过子路由的空路径重定向到/sub-app1/component1，正常显示对应组件；若需在未登录时拦截子应用路由，可添加路由守卫判断登录状态，自动重定向到登录页。

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