xng-breadcrumb在Angular懒加载子模块中出现TypeError: Cannot read properties of undefined (reading 'routes')错误的解决方案咨询

不用急着更换库，这个问题是xng-breadcrumb处理Angular懒加载路由时的常见配置疏漏，我来给你一步步解决：

第一步：在懒加载子模块中导入XngBreadcrumbModule #

你的懒加载模块qna.module.ts里目前只导入了基础模块，但xng-breadcrumb的功能模块需要在每个使用它的模块（包括懒加载模块）中单独导入——因为懒加载模块是独立的NgModule，不会自动继承根模块的导入：

@NgModule({
  declarations: [
    QnaComponent,
  ],
  imports: [
    CommonModule,
    QnaRoutingModule,
    XngBreadcrumbModule // 添加这一行，导入面包屑模块
  ],
  providers: [ QnaService ],
})
export class QnaModule { }

第二步：将面包屑配置移到懒加载模块的子路由中 #

直接在根路由的children里给懒加载路由配置breadcrumb，可能会因为路由异步加载的时机问题，导致xng-breadcrumb无法正确读取配置。建议把面包屑的配置移到懒加载模块的路由文件（QnaRoutingModule）中：

假设你的QnaRoutingModule原本是这样，修改它：

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

const routes: Routes = [
  {
    path: '', // 空路径对应根路由中指定的`pages/qna`
    component: QnaComponent,
    data: {
      breadcrumb: 'QnA' // 把面包屑配置放在这里
    }
  }
];

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

然后修改根路由的配置，移除原来的breadcrumb配置（保留其他如角色权限的配置即可）：

{
  path: 'pages/qna',
  loadChildren: () => import('../app/controllers/qna/qna.module').then(x => x.QnaModule),
  data: { roles: ["Admin"] }, // 仅保留非面包屑的配置
  // canActivate: [AuthGuard]
},

第三步：如果问题仍存在，尝试使用Resolver动态设置面包屑（可选） #

如果上面两步还是没解决，可能是路由加载时机的问题，可以用Resolver来动态提供面包屑内容，确保xng-breadcrumb能在路由加载完成后获取到配置：

1. 先创建一个Resolver服务：

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

@Injectable()
export class QnaBreadcrumbResolver implements Resolve<string> {
  resolve() {
    return 'QnA'; // 返回面包屑的标签文本
  }
}

2. 在QnaModule的providers中注册这个Resolver：

@NgModule({
  declarations: [QnaComponent],
  imports: [CommonModule, QnaRoutingModule, XngBreadcrumbModule],
  providers: [QnaService, QnaBreadcrumbResolver], // 添加Resolver
})
export class QnaModule { }

3. 修改懒加载子路由的配置，使用Resolver：

const routes: Routes = [
  {
    path: '',
    component: QnaComponent,
    data: {
      breadcrumb: {
        resolve: QnaBreadcrumbResolver // 指定使用这个Resolver
      }
    }
  }
];

问题原因说明 #

这个错误TypeError: Cannot read properties of undefined (reading 'routes')，本质是因为懒加载模块的路由是异步加载的，xng-breadcrumb初始化时无法提前读取到懒加载路由的配置信息，导致内部逻辑尝试访问未定义的routes属性。通过在懒加载模块导入对应模块、将面包屑配置移到子路由中，就能让库正确识别到路由的元数据，从而解决问题。

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