Angular 13懒加载下子组件引入孙组件报错问题

问题核心分析 #

你遇到的'grandchild' is not a known element错误，本质是三个问题叠加导致：组件选择器不匹配、懒加载模块的隔离性限制、错误使用CUSTOM_ELEMENTS_SCHEMA掩盖真实问题。

具体修复步骤 #

1. 修正组件选择器与别名 #

组件重名时必须通过导入别名区分，同时确保HTML中使用的选择器与组件定义完全一致（Angular组件选择器推荐用kebab-case小写短横线格式，大小写敏感）：

• 在孙组件所在的DomDetailModule中，导入时给组件加别名：

  // domDetail/index.component.ts 导入处
  import { IndexComponent as DetailIndexComponent } from './index.component';
  

• 孙组件的@Component装饰器中定义正确的选择器：

  @Component({
    selector: 'app-detail-index', // 统一用kebab-case
    templateUrl: './index.component.html'
  })
  export class DetailIndexComponent { }
  

• 子组件HTML中使用正确的选择器：

  <!-- 替换原<app-Detail-index> -->
  <app-detail-index></app-detail-index>
  

2. 解决懒加载模块的隔离问题 #

懒加载的DomDetailModule是独立模块，父模块DomModule无法直接访问其内部组件。要让子组件能使用孙组件，有两种合规方案：

方案A：抽离共享模块（推荐）

创建共享模块统一管理需要跨模块使用的组件：

// shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DetailIndexComponent } from '../domDetail/index.component';

@NgModule({
  declarations: [DetailIndexComponent],
  exports: [DetailIndexComponent], // 导出才能被其他模块使用
  imports: [CommonModule]
})
export class SharedModule { }

然后在DomModule和DomDetailModule中分别导入共享模块：

// dom.module.ts
@NgModule({
  declarations: [CreateComponent, EditComponent, IndexComponent, ViewComponent],
  imports: [
    CommonModule,
    DomRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule // 导入共享模块
  ]
})
export class DomModule { }

方案B：通过路由Outlet加载懒加载组件

如果孙组件必须保持懒加载状态，不能通过共享模块暴露，那么不要在子组件HTML中直接写组件标签，而是通过路由嵌套加载：

• 在DomRoutingModule中配置嵌套路由：

  const routes: Routes = [
    // ...其他路由
    { 
      path: ':domId/view', 
      component: ViewComponent,
      children: [
        { path: 'detail', loadChildren: () => import('../domDetail/domDetail.module').then(m => m.DomDetailModule) }
      ]
    },
  ];
  

• 在子组件（ViewComponent）的HTML中添加路由出口：

  <router-outlet></router-outlet>
  

• 通过访问/dom/xxx/view/detail路径加载孙组件。

3. 移除不必要的CUSTOM_ELEMENTS_SCHEMA #

CUSTOM_ELEMENTS_SCHEMA是给Web Component用的，你的场景是Angular组件，添加这个配置只会让Angular跳过组件合法性检查，掩盖真实错误，直接删除所有模块中的该配置即可。

内容的提问来源于stack exchange，提问作者kiki keke