Angular子模块路由不生效问题排查与解决方案咨询

问题根因 #

你当前路由无法跳转的核心原因有4个：

1. 子模块未导入自身路由模块：现有代码仅编写了子模块的路由规则，但BlogpostModule和CmspageModule没有导入对应的BlogpostRoutingModule、CmspageRoutingModule，子路由从未注册到全局路由表
2. 根路径配置无效：主路由中{path: '', redirectTo: '', pathMatch: 'full'}属于无效配置，会触发重定向死循环
3. 缺少路由渲染出口：AppComponent模板中未添加<router-outlet>标签，路由匹配到组件也没有对应的渲染位置
4. （可选样式问题）首页routerLinkActive未加精确匹配规则，会导致所有页面都高亮首页导航

完整解决方案 #

步骤1：子模块导入自身路由模块 #

分别修改两个子模块的定义文件，导入对应路由模块：

blogpost.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlogpostRoutingModule } from './blogpost-routing.module';
import { BlogpostListComponent } from './blogpost-list/blogpost-list.component';
import { BlogpostDetailComponent } from './blogpost-detail/blogpost-detail.component';

@NgModule({
  declarations: [
    BlogpostListComponent,
    BlogpostDetailComponent
  ],
  imports: [
    CommonModule,
    BlogpostRoutingModule // 新增导入自身路由模块
  ]
})
export class BlogpostModule { }

cmspage.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CmspageRoutingModule } from './cmspage-routing.module';
import { PageComponent } from './page/page.component';
import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
  declarations: [
    PageComponent,
    ContactFormComponent
  ],
  imports: [
    CommonModule,
    CmspageRoutingModule // 新增导入自身路由模块
  ]
})
export class CmspageModule { }

步骤2：修复主路由配置 #

修改app-routing.module.ts，替换无效的根路径重定向规则，这里直接使用BannerComponent作为首页内容：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { BannerComponent } from './banner/banner.component';

const routes: Routes = [
  // 根路径渲染首页组件，需要跳转到博客则改为 {path: '', redirectTo: '/blog', pathMatch: 'full'}
  {path: '', component: BannerComponent, pathMatch: 'full'},
  {path: '**', component: PageNotFoundComponent}
];

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

步骤3：添加路由出口 #

修改app.component.html，确保包含路由渲染出口：

<app-header></app-header>
<!-- 路由匹配到的组件会渲染在此处，必须添加 -->
<router-outlet></router-outlet>
<app-footer></app-footer>

步骤4：（可选）修复导航高亮规则 #

修改头部组件HTML的首页导航，添加精确匹配规则，避免其他页面高亮首页：

<li class="nav-item">
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="nav-link">Home</a>
</li>

子模块路由配置说明 #

可以直接在子模块路由文件中配置父级路由并生效，不需要把路由规则写到主路由文件中，只需满足两个条件：

• 子模块内部导入自身的RoutingModule
• 子模块在AppModule的imports数组中，排在AppRoutingModule之前导入（你当前的导入顺序已经符合要求，不需要修改）

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