Angular自定义库组件中子路由无法加载问题排查

算力阿峰

2026-6-28

Angular自定义库路由子组件加载失败问题

我开发了一个自定义Angular库，并用Demo应用测试它。Demo应用导入该库后，自定义组件能正常显示name和phone输入属性，但库组件内的<router-outlet>无法加载子组件ChildLibraryComponent。

Demo应用情况

Demo页面路径为localhost:4200/demo，对应demo-component.html内容为：

<library-component
      [name]="name"
      [phone]="phone">
</library-component>

app-routing.module.ts路由配置：

const routes: Routes = [
   {
       path: '',
       pathMatch: 'full',
       redirectTo: 'landing-page'
   },
   {
     path: 'landing-page',
     loadChildren: () => import('./landing-page.module').then(m => m.LandingPageModule)
   },
   {
      path: 'demo',
      loadChildren: () => import('./demo.module').then(m => m.DemoModule)
   }
]

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

export class AppRoutingModule {}

Demo模块仅导入LibraryComponentModule，能正常渲染库组件的HTML，但库内的子路由无法加载。

自定义库情况

library-component.html内容：

<section>
    {{name}}
    {{phone}}
    <router-outlet></router-outlet> <!-- 此处无法加载子组件 -->
</section>

library-routing.module.ts路由配置：

const routes: Routes = [
       {
       path: '',
       component: LibraryComponent,
       children: [
           {path: '', component: ChildLibraryComponent}
        ]
       }
  ]

ChildLibraryComponent的HTML为：

<div>Hello World</div>

child-library-routing.module.ts路由配置：

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

目前输入属性正常显示，但子组件始终无法加载，请问我遗漏了什么配置？

问题原因及修复方案

核心问题

你当前的配置中，Demo应用的路由只到/demo层级，库内部的路由没有被集成到Demo应用的路由体系里。库的路由模块没被正确导入到Demo的路由链中，导致Angular无法识别库内的子路由规则，<router-outlet>自然匹配不到对应的子组件。

具体修复步骤

修正库路由模块的初始化方式
库的路由模块必须用RouterModule.forChild(routes)初始化（forRoot只能在根模块用一次），同时确保LibraryComponentModule导入了LibraryRoutingModule。修改library-routing.module.ts：
```
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LibraryRoutingModule {}
```

通过路由加载库组件，而非直接在模板中引用
直接在Demo组件模板中写<library-component>会让它变成静态渲染内容，内部的<router-outlet>无法关联应用路由系统。需要把库组件纳入Demo的路由结构：

新建/修改demo-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    // 直接加载库组件，并挂载它的子路由
    component: LibraryComponent,
    children: [
      { path: '', component: ChildLibraryComponent }
      // 也可以直接导入库的路由模块，复用库内的路由配置
      // { path: '', loadChildren: () => import('你的库包名').then(m => m.LibraryRoutingModule) }
    ]
  }
];

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

修改demo-component.html，只保留路由出口：
```
<router-outlet></router-outlet>
```

确保库的核心内容正确导出
在库的public-api.ts中导出需要被Demo应用使用的组件和路由模块：

export * from './lib/library-component/library-component.component';
export * from './lib/child-library-component/child-library-component.component';
export * from './lib/library-routing.module';

关键原理

Angular路由是层级树状结构，只有当父路由（这里是/demo）包含子路由规则，且对应组件模板有<router-outlet>时，子路由才能匹配加载组件。通过路由加载库组件，才能让它成为应用路由树的一部分，其内部的<router-outlet>才能关联到子路由规则。

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

Angular自定义库组件中子路由无法加载问题排查

Demo应用情况 #

自定义库情况 #

问题原因及修复方案 #

核心问题 #

具体修复步骤 #