Angular13配置路由后仅URL变化页面内容未更新是什么原因？

Angular 13 路由URL变化但组件未渲染排查方案 #

• 检查路由模块导入配置是否正确
  确认AppRoutingModule已正确添加到AppModule的imports数组中，同时AppRoutingModule的@NgModule配置需包含以下导入导出逻辑：

  @NgModule({
    imports: [RouterModule.forRoot(routes)], // 根路由必须用forRoot注册
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 检查路由数组的排序优先级
  Angular路由按数组从上到下的顺序匹配，通配符路由**、根路径重定向路由必须放在路由数组的最后位置，错误的排序会导致后续路由规则无法被命中，示例正确配置：

  const routes: Routes = [
    { path: 'first-component', component: FirstComponent },
    { path: 'second-component', component: SecondComponent },
    { path: 'mainpage', loadChildren: () => import('./mainpage/mainpage.module').then(m => m.MainpageModule) },
    // 通配符放在最后
    { path: '**', redirectTo: '' }
  ];
  

• 检查重定向路由的pathMatch属性
  若配置了根路径重定向，必须添加pathMatch: 'full'，否则空字符串会作为所有路径的前缀被优先匹配，导致所有路由都触发重定向，示例正确配置：

  { path: '', redirectTo: '/first-component', pathMatch: 'full' }
  

• 检查组件/模块的注册逻辑
  1. 普通路由绑定的组件必须在对应模块的declarations数组中声明
  2. 懒加载的子模块内部必须用RouterModule.forChild()注册子路由，示例子模块路由配置：

  // mainpage-routing.module.ts 内的配置
  const routes: Routes = [
    { path: '', component: MainpageComponent } // 子路由会拼接父路由前缀mainpage
  ];
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class MainpageRoutingModule { }
  

  3. 懒加载的模块路径注意大小写匹配，Angular对文件路径大小写敏感，路径错误会导致模块加载失败无渲染
• 检查router-outlet是否实际生效
  打开浏览器开发者工具的元素面板，确认app.component.html内的<router-outlet>实际渲染到了DOM中，排除*ngIf条件不满足、元素被样式隐藏等情况
• 查看控制台报错
  打开浏览器控制台，查看是否存在组件未声明、模块加载404、路由匹配失败等明确报错信息，可直接定位问题根源

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