Ionic5 Angular组件跨模块共享报错：'ion-card-subtitle'未识别

你需要在SharedCompsModule中导入IonicModule，因为RecommendationsComponent的模板里用到了Ionic的ion-card-subtitle组件，而Angular的模块是隔离的——组件所在的模块必须导入它依赖的所有模块，即使父模块已经导入了这些模块也不行。

修改后的SharedCompsModule代码：

@NgModule({
  declarations: [
    RecommendationsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule // 新增这一行
  ],
  exports: [
    RecommendationsComponent
  ]
})
export class SharedCompsModule { }

另外，你可以移除Tab1PageModule和Tab3PageModule中的CUSTOM_ELEMENTS_SCHEMA，因为ion-card-subtitle是Ionic提供的Angular组件，不是自定义Web组件，这个schema是用来忽略未知Web组件的警告，现在不需要了。

修改后的Tab1PageModule示例：

@NgModule({
  // 移除schemas这一行
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    Tab1PageRoutingModule,
    SharedCompsModule
  ],
  declarations: [
    Tab1Page,
  ]
})
export class Tab1PageModule {}

原因说明 #

Angular模块的依赖是模块级隔离的：

• 如果一个组件属于Module A，那么Module A必须导入该组件模板中用到的所有第三方模块（比如IonicModule），哪怕Module B导入了Module A和IonicModule，Module A自身还是得单独导入IonicModule才能让内部组件识别Ionic的组件。
• 之前添加CUSTOM_ELEMENTS_SCHEMA只是掩盖了问题，并没有真正解决依赖缺失的问题，正确的做法是导入对应的模块来提供所需的组件。

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