Angular 11路由匹配异常：无效路由未跳转首页反而报错

问题核心原因 #

Angular路由采用从上到下的顺序匹配机制，如果通配符路由（path: '**'）位置不正确，或者首页路由未正确配置pathMatch，就会出现要么无效路由报错、要么所有路由被错误重定向的问题。

正确路由配置示例 #

修改app-routing.module.ts的路由配置，遵循「具体路由在前，通配符路由在最后」的原则，同时为首页空路径路由添加pathMatch: 'full'：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignupComponent } from './signup/signup.component';

const routes: Routes = [
  // 首页懒加载路由：空路径必须配置pathMatch: 'full'，确保仅匹配完整空URL
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    pathMatch: 'full'
  },
  // 独立组件路由
  {
    path: 'signup',
    component: SignupComponent
  },
  // Portal懒加载路由
  {
    path: 'portal',
    loadChildren: () => import('./portal/portal.module').then(m => m.PortalModule)
  },
  // 通配符路由：必须放在最后，匹配所有未定义的路由，重定向至首页
  {
    path: '**',
    redirectTo: ''
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

关键配置说明 #

1. 首页路由的pathMatch: 'full'
   没有这个配置时，空路径''会匹配所有以空开头的URL（也就是所有URL），导致后续路由无法被匹配。添加pathMatch: 'full'后，仅当URL完全为空时才会触发首页懒加载。

2. 通配符路由的位置
   path: '**'是优先级最低的路由，必须放在所有具体路由的最后，这样Angular会先匹配/signup、/portal等有效路由，只有当没有任何匹配项时才会触发通配符的重定向。

3. 懒加载模块内部路由验证
   检查首页懒加载模块（如HomeModule）的内部路由，确保没有冲突配置。例如HomeRoutingModule的配置应简洁明确：

   const routes: Routes = [
     { path: '', component: HomeComponent }
   ];
   

可选调整：将无效路由重定向至Portal #

如果需求是让无效路由跳转到Portal，只需修改通配符路由的redirectTo值即可，位置仍需保持在最后：

{
  path: '**',
  redirectTo: 'portal'
}

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