Ionic Angular项目中ion-breadcrumbs组件NG8001报错的解决咨询

问题原因 #

ion-breadcrumbs与ion-breadcrumb是Ionic 6及以上版本才新增的官方组件，你的项目使用的是Ionic 5.6.7，因此Angular无法识别这些组件，抛出NG8001错误。

解决方案 #

方案一：升级到Ionic 6（推荐） #

你的Angular版本为12.0.1，刚好符合Ionic 6的兼容要求（Ionic 6支持Angular 12~14），升级步骤如下：

1. 执行命令升级@ionic/angular：

   npm install @ionic/angular@6.x
   

2. 确保使用组件的页面/模块中已导入IonicModule（通常已默认配置，若未导入则添加）：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { IonicModule } from '@ionic/angular';
   import { TargetPageComponent } from './target-page.component';
   
   @NgModule({
     declarations: [TargetPageComponent],
     imports: [
       CommonModule,
       IonicModule // 导入后即可识别所有Ionic官方组件
     ]
   })
   export class TargetPageModule {}
   

3. 重新运行项目后，即可正常使用你提供的ion-breadcrumbs代码：

   <ion-breadcrumbs>
     <ion-breadcrumb href="#home">Home</ion-breadcrumb>
     <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
     <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
     <ion-breadcrumb href="#film">Film</ion-breadcrumb>
   </ion-breadcrumbs>
   

方案二：在Ionic 5中手动实现面包屑 #

若不想升级版本，可利用Ionic现有组件手动实现面包屑功能：

1. 页面模板代码：

   <ion-row class="custom-breadcrumbs">
     <ion-col size-auto>
       <ion-button fill="clear" href="#home">Home</ion-button>
     </ion-col>
     <ion-col size-auto class="breadcrumb-separator">/</ion-col>
     <ion-col size-auto>
       <ion-button fill="clear" href="#electronics">Electronics</ion-button>
     </ion-col>
     <ion-col size-auto class="breadcrumb-separator">/</ion-col>
     <ion-col size-auto>
       <ion-button fill="clear" href="#cameras">Cameras</ion-button>
     </ion-col>
     <ion-col size-auto class="breadcrumb-separator">/</ion-col>
     <ion-col size-auto class="breadcrumb-active">Film</ion-col>
   </ion-row>
   

2. 对应的样式代码：

   .custom-breadcrumbs {
     align-items: center;
     padding: 0.5rem 1rem;
   }
   .breadcrumb-separator {
     text-align: center;
     color: var(--ion-color-medium-shade);
     font-size: 0.9rem;
   }
   .custom-breadcrumbs ion-button {
     --padding-start: 0;
     --padding-end: 0;
     --margin-start: 0;
     --margin-end: 0;
     text-transform: none;
     font-size: 0.9rem;
   }
   .breadcrumb-active {
     color: var(--ion-color-primary);
     font-size: 0.9rem;
   }
   

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