Angular NG8001错误求助：组件仅在部分页面可正常使用

问题根源 #

你的AppModule的declarations数组中仅声明了HomeComponent，未包含SignInComponent等其他页面组件。Angular的规则是：所有要在模板中调用其他组件的页面组件，必须先在所属模块的declarations里完成注册；同时，被调用的共享组件（如HeaderComponent）也必须在同一模块的declarations中，或是通过导入其他模块来引入。

HomeComponent能正常使用app-header，正是因为它在declarations数组内；而SignInComponent不在其中，导致Angular无法识别其模板里的app-header组件。

快速解决方法 #

修改app.module.ts的declarations数组，将所有页面组件添加进去：

@NgModule({
  declarations: [
    AppComponent,
    // 共享组件
    HeaderComponent,
    SliderComponent,
    ContactFormComponent,
    FooterComponent,
    // 页面组件
    HomeComponent,
    SignInComponent,
    SignUpComponent,
    AboutUsComponent,
    AsiaComponent,
    EuropeComponent,
    ItalyComponent,
    SpainComponent,
    LastBlogsComponent,
    PatreonComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

更规范的优化方案（可选） #

对于header、slider这类全局共享组件，建议创建独立的CoreModule统一管理：

1. 在src/app/core目录下新建core.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './components/header/header.component';
import { SliderComponent } from './components/slider/slider.component';
import { FooterComponent } from './components/footer/footer.component';
import { ContactFormComponent } from './components/contact-form/contact-form.component';

@NgModule({
  declarations: [
    HeaderComponent,
    SliderComponent,
    FooterComponent,
    ContactFormComponent
  ],
  exports: [
    HeaderComponent,
    SliderComponent,
    FooterComponent,
    ContactFormComponent
  ],
  imports: [CommonModule]
})
export class CoreModule { }

2. 在AppModule中导入CoreModule，并移除declarations里的共享组件：

import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SignInComponent,
    SignUpComponent,
    AboutUsComponent,
    AsiaComponent,
    EuropeComponent,
    ItalyComponent,
    SpainComponent,
    LastBlogsComponent,
    PatreonComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

这种方式能避免共享组件重复声明，所有导入CoreModule的模块都能直接使用这些组件，符合Angular模块化的最佳实践。

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