Angular 8 基于应用类型动态配置条件路由的问题咨询

结论 #

这种给RouterModule.forRoot动态传路由配置的方式本身是可行的，报错是路由匹配逻辑的问题，常见原因如下：

问题排查点 #

1. Hash路由路径访问错误
   你开启了useHash: true配置，所有路由需要跟在URL的hash段之后，纯Angular场景下你需要访问的地址格式为：https://你的域名/#/parent/org/companyname/landing，如果直接访问不带#前缀的路径，Angular路由无法匹配到配置项，就会抛出"no matching routes"错误。

2. 缺少兜底路由/根路径匹配规则
   你当前的PURENG_Routes只配置了parent/org/companyname前缀的路由，如果你直接访问应用根路径/，或者其他不在配置内的路径，没有对应的匹配规则就会报错。

3. 重定向路径写法冗余易出错
   你当前的重定向写了全路径，虽然语法没有问题，但相对路径写法更不容易出现拼写错误：

const PURENG_Routes: Routes = [
  {
    path: 'parent/org/companyname',
    redirectTo: 'landing', // 相对当前path的路径，等价于parent/org/companyname/landing
    pathMatch: 'full'
  },
  {
    path: 'parent/org/companyname/landing',
    component: LandingComponent
  }
]

4. 变量值不符合预期
   可以在App Module初始化位置打印isHybridRouteCheck的实际值，确认模块加载时变量值确实为false，避免因为sessionStorage读取时机问题导致加载了错误的路由配置：

console.log('是否加载混合应用路由：', isHybridRouteCheck)
@NgModule({
  // 模块配置
})

快速排错方案 #

可以临时开启路由匹配日志，直观看到路由匹配的完整过程定位问题：

RouterModule.forRoot(isHybridRouteCheck ? HYBRID_Routes: PURENG_Routes, { 
  useHash: true,
  enableTracing: true // 控制台会输出所有路由匹配的步骤
})

同时给两组路由都增加通配符兜底规则，避免直接抛出匹配错误：

// 混合应用路由加兜底
const HYBRID_Routes: Routes = [
  { path: 'landing', component: LandingComponent },
  { path: '**', redirectTo: 'landing' }
  // 其他配置
]

// 纯Angular路由加兜底
const PURENG_Routes: Routes = [
  // 原有配置
  { path: '**', redirectTo: 'parent/org/companyname/landing' }
]

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