Angular 12使用xng-breadcrumb实现面包屑导航报错求助

• 确认版本兼容性：xng-breadcrumb 9.x及以上版本仅支持Angular 14+，Angular12必须安装对应兼容的8.x版本，执行npm install xng-breadcrumb@8.0.0安装匹配版本，避免版本不兼容导致的模板解析错误。
• 检查模块导入是否正确：必须在项目根模块（通常是app.module.ts）或者共享模块中导入BreadcrumbModule，示例代码：

import { BreadcrumbModule } from 'xng-breadcrumb';

@NgModule({
  imports: [
    // 其余项目依赖模块
    BreadcrumbModule
  ]
})
export class AppModule { }

如果项目使用独立组件模式，需要在使用xng-breadcrumb的组件的imports数组中加入BreadcrumbModule。

• 检查路由配置是否正确：xng-breadcrumb依赖Angular路由的data配置声明面包屑名称，每个需要显示在面包屑中的路由都需要配置data.breadcrumb参数，示例：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: { breadcrumb: '首页' },
    children: [
      {
        path: 'list',
        component: ListComponent,
        data: { breadcrumb: '列表页' }
      }
    ]
  }
];

未配置对应路由的breadcrumb参数时，组件运行时可能触发空值相关报错。

• 检查路由层级匹配：你当前代码已自定义了menu和submenu的路由跳转逻辑，需要确认自定义路由的层级和xng-breadcrumb读取的路由层级一致，避免路由参数不匹配导致的跳转异常。
• 可根据浏览器控制台具体报错定位问题：如果报错为*'xng-breadcrumb' is not a known element*则属于模块未导入问题，如果是运行时属性读取错误则优先检查路由配置和版本匹配问题。

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