Angular组件未加入declarations数组仍可正常加载的原因是什么

Angular 12及更高版本默认启用Ivy编译器，开发模式下执行ng serve默认使用JIT（即时编译）模式，该模式下Ivy会自动扫描路由中直接引用的组件，隐式完成组件的注册逻辑，不需要显式在NgModule的declarations数组中声明，因此开发环境运行不会报错。

该特性仅存在于JIT开发模式，如果你切换到AOT预编译模式，比如执行生产构建命令ng build --prod，或者在angular.json中开启aot配置，编译阶段就会直接抛出组件未声明的错误，无法完成构建。

按照Angular官方模块化规范，需要将PollingComponent显式加入AppModule的declarations数组，避免生产构建出现异常：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PollingComponent } from './polling/polling.component'; // 引入组件

@NgModule({
  declarations: [
    AppComponent,
    PollingComponent // 声明组件
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {}
}

你也可以单独为PollingComponent创建特性模块，再将特性模块导入AppModule，更符合模块化拆分的开发规范。

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