Angular 2组件加载异常：登录组件调用头部组件失败排查

兄弟，这个报错是Angular开发里超常见的组件使用问题，本质就是Angular的模块系统没识别到你的header-component组件，下面给你一步步排查解决：

第一步：确认Header组件的元数据是否匹配 #

先检查你的header-component.component.ts里的selector是不是和模板里用的<header-component>完全一致，代码应该长这样：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'header-component', // 这里必须和login模板里的标签名完全对应
  templateUrl: './header-component.component.html',
  styleUrls: ['./header-component.component.css']
})
export class HeaderComponentComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

要是这里selector写成了app-header或者其他名字，那模板里用<header-component>肯定找不到组件。

第二步：确保Header组件被模块正确注册 #

Angular的组件必须在NgModule的declarations数组里注册，才能在该模块的其他组件中使用，分两种情况处理：

情况1：Header和Login在同一个模块（比如AppModule） #

打开你的app.module.ts，检查declarations里有没有同时包含两个组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoginComponentComponent } from './login-component/login-component.component';
import { HeaderComponentComponent } from './header-component/header-component.component'; // 别漏了导入

@NgModule({
  declarations: [
    AppComponent,
    LoginComponentComponent,
    HeaderComponentComponent // 必须把Header组件加到这里！
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

情况2：Header在独立的Feature Module（比如HeaderModule） #

如果Header组件是放在单独的模块里，需要两步操作：

1. 在HeaderModule里声明并导出Header组件，让外部模块能访问到：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponentComponent } from './header-component.component';

@NgModule({
  declarations: [HeaderComponentComponent],
  exports: [HeaderComponentComponent], // 导出组件是关键！
  imports: [CommonModule]
})
export class HeaderModule { }

2. 然后在Login组件所在的模块（比如LoginModule或AppModule）里导入HeaderModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponentComponent } from './login-component.component';
import { HeaderModule } from '../header/header.module'; // 导入Header模块

@NgModule({
  declarations: [LoginComponentComponent],
  imports: [
    CommonModule,
    HeaderModule // 加到这里才能用Header组件
  ]
})
export class LoginModule { }

第三步：检查拼写和路径细节 #

别忽略低级错误！比如模板里的<header-component>是不是和组件selector的大小写、连字符完全一致？导入组件时的文件路径有没有写错（比如少了文件夹名、拼错文件名）？

最后，修改完记得重启Angular开发服务器（ng serve），有时候缓存会导致修改不生效哦！

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