如何在Ionic Angular 11中创建全局组件及解决dynamic-header未识别报错

当前实现存在三处不符合Angular模块规范的配置，直接导致dynamic-header选择器无法被各业务模块识别：

• 在AppModule中仅声明了HeaderComponent但未做导出，Angular中声明在模块内的组件默认是模块私有，其他模块无法直接访问。
• 在contact.module.ts的imports数组中错误引入了HeaderComponent类，imports数组仅支持引入其他Angular模块（NgModule），不支持直接引入组件类，该配置完全不生效。
• 尝试添加的CUSTOM_ELEMENTS_SCHEMA仅对Web Component识别生效，且仅作用于当前模块的模板解析，无法解决Angular组件未导入的问题，对路由模块的独立模板作用域没有任何影响。

步骤1：搭建共享模块承载全局组件 #

新建专门的共享模块（如SharedModule），统一管理需要跨模块复用的通用组件，核心逻辑是声明组件 + 导出组件，让其他模块引入后可以直接使用组件选择器：

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [HeaderComponent],
  imports: [CommonModule],
  exports: [HeaderComponent] // 关键配置：将组件导出给引入本模块的其他模块使用
})
export class SharedModule { }

步骤2：调整根模块配置 #

移除app.module.ts中对HeaderComponent的单独声明，避免重复声明报错，同时引入刚才创建的共享模块：

// app.module.ts 关键调整部分
@NgModule({
  declarations: [AppComponent], // 删除原配置里的HeaderComponent声明
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    SharedModule // 引入共享模块
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

步骤3：调整业务模块（contact）的配置 #

移除contact.module.ts里错误放到imports数组的HeaderComponent类，替换为引入共享模块：

// contact.module.ts 关键调整部分
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SharedModule, // 替换原配置里错误引入的HeaderComponent
    ContactPageRoutingModule
  ],
  declarations: [ContactPage]
})
export class ContactPageModule {}

• 所有需要跨模块使用的Angular组件，必须通过共享模块的exports数组暴露，不能通过在业务模块直接导入组件类实现复用。
• CUSTOM_ELEMENTS_SCHEMA仅用于第三方Web Component的场景，不要用它绕过组件未导入的报错，否则Angular会直接跳过未知元素的渲染逻辑，就算控制台不报错，组件也无法正常展示。
• 每个路由模块都是独立的Angular模块作用域，模板解析不会自动继承根模块的组件声明和schema配置，跨模块的组件必须显式引入共享模块才能识别。

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