Angular5懒加载多组件报错：'header'不是已知元素

这个问题我之前帮不少开发者处理过，核心原因是Angular模块的作用域隔离机制：懒加载的CustomerModule是一个独立的NgModule，它无法直接访问AppModule（或其他模块）里声明的组件，除非你显式地把这些组件暴露给它。

问题根源拆解 #

你大概率是在AppModule里声明了HeaderComponent和FootComponent，但懒加载的CustomerModule属于独立的模块上下文，默认看不到这些组件。而且直接在多个模块里重复声明组件会触发Angular的重复声明错误，所以正确的做法是用**共享模块（SharedModule）**来管理这些全局复用的组件。

步骤1：创建并配置SharedModule #

首先把HeaderComponent和FootComponent统一放到一个共享模块里，让所有需要用到它们的模块都能导入使用：

1. 生成SharedModule（如果还没有的话）：

   ng generate module shared
   

2. 修改shared.module.ts，把两个组件声明并导出：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   // 导入你的头部和底部组件
   import { HeaderComponent } from '../header/header.component';
   import { FootComponent } from '../foot/foot.component';
   
   @NgModule({
     declarations: [
       HeaderComponent,
       FootComponent
     ],
     imports: [
       CommonModule
     ],
     exports: [
       // 必须导出，其他模块导入SharedModule后才能使用这些组件
       HeaderComponent,
       FootComponent
     ]
   })
   export class SharedModule { }
   

3. 记得从AppModule的declarations数组里移除HeaderComponent和FootComponent，避免重复声明的错误（一个组件只能属于一个模块的declarations）。

步骤2：在CustomerModule中导入SharedModule #

打开customer.module.ts，把SharedModule加入到imports数组里：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerComponent } from './customer.component';
import { CustbasicdetailsComponent } from './custbasicdetails/custbasicdetails.component';
// 导入共享模块
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [
    CustomerComponent,
    CustbasicdetailsComponent
  ],
  imports: [
    CommonModule,
    CustomerRoutingModule,
    SharedModule // 关键：加入这行
  ]
})
export class CustomerModule { }

额外检查点 #

如果做完上面的步骤还是报错，那你需要检查：

• 确认HeaderComponent的selector和你模板里用的标签一致。比如组件里的selector是app-header，那模板里必须写<app-header>而不是<header>：

  @Component({
    selector: 'app-header', // 这里要和模板中的标签匹配
    templateUrl: './header.component.html'
  })
  export class HeaderComponent { }
  

• 不要尝试直接在CustomerModule的declarations里声明HeaderComponent和FootComponent，这会导致组件被多个模块声明，违反Angular的模块规则。

内容的提问来源于stack exchange，提问作者Vikram R