Angular 19应用集成自定义库时内部路由无法正常工作

问题根源 #

主应用的property/:id和portfolio/:id路由未配置子路由来承接库的路由规则，且父组件模板缺少路由出口，导致导航后路由无法匹配对应组件。

分步解决方案 #

1. 重构库的路由配置（导出可复用路由集合）

修改库的路由模块，将路由规则导出为独立常量，方便主应用导入复用：

// lib-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { ProjectsComponent } from './projects.component';
import { DashboardComponent } from './dashboard.component';

// 导出库路由常量，供主应用导入
export const libRoutes: Routes = [
  { path: 'projects', component: ProjectsComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [RouterModule.forChild(libRoutes)],
  exports: [RouterModule]
})
export class LibRoutingModule {}

更新库模块，确保正确导入并导出路由模块：

// lib.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibRoutingModule } from './lib-routing.module';
import { ProjectsComponent } from './projects.component';
import { DashboardComponent } from './dashboard.component';
import { LibComponent } from './lib.component'; // 你的库根组件

@NgModule({
  imports: [CommonModule, LibRoutingModule],
  declarations: [ProjectsComponent, DashboardComponent, LibComponent],
  exports: [LibComponent, LibRoutingModule]
})
export class LibModule {}

2. 修改主应用路由，挂载库的子路由

在主应用路由中，为property/:id和portfolio/:id添加子路由，导入库的路由集合：

// app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { Container } from './container.component';
import { PropertyContainerComponent } from './property-container.component';
import { PortfolioContainerComponent } from './portfolio-container.component';
import { libRoutes } from 'your-lib-package'; // 替换为实际的库路径

const routes: Routes = [
  {
    path: 'layout',
    component: Container,
    children: [
      { 
        path: 'property/:id', 
        component: PropertyContainerComponent,
        children: libRoutes // 挂载库路由作为子路由
      },
      { 
        path: 'portfolio/:id', 
        component: PortfolioContainerComponent,
        children: libRoutes // 同样挂载库路由
      }
    ]
  }
];

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

3. 为父组件添加路由出口

在PropertyContainerComponent和PortfolioContainerComponent的模板中添加<router-outlet>，用于渲染库的子路由组件：

<!-- property-container.component.html -->
<lib-component [input]="data"></lib-component>
<router-outlet></router-outlet> <!-- 新增路由出口 -->

<!-- portfolio-container.component.html -->
<lib-component [input]="data"></lib-component>
<router-outlet></router-outlet> <!-- 新增路由出口 -->

4. 验证导航逻辑

确保库组件中注入的ActivatedRoute指向当前激活的父路由，导航逻辑保持不变即可：

// lib.component.ts
import { ActivatedRoute, Router } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

// 导航逻辑
if (property) {
  this.router.navigate(['projects'], { relativeTo: this.route });
}
if (portfolio) {
  this.router.navigate(['dashboard'], { relativeTo: this.route });
}

效果验证 #

完成上述修改后，导航到layout/property/100/projects或layout/portfolio/100/dashboard时：

1. URL会正确匹配主应用父路由+库子路由的规则
2. 对应的ProjectsComponent或DashboardComponent会通过父组件的<router-outlet>渲染

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