Angular 15升级后在NgModule引入独立组件报错求助

问题根源 #

你把独立组件加到了NgModule的imports数组里，但imports只允许放Angular模块（NgModule），独立组件不属于模块，所以触发了Class ExchangeCategoriesAutocompleteComponent is not an Angular module.的错误。

正确处理方式 #

1. 在NgModule中声明独立组件 #

把独立组件添加到NgModule的declarations数组中，如果需要让其他模块也能使用这个组件，再加到exports数组里：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExchangeCategoriesAutocompleteComponent } from './exchange-categories-autocomplete.component';

@NgModule({
  declarations: [
    // 在这里注册独立组件
    ExchangeCategoriesAutocompleteComponent
  ],
  imports: [
    CommonModule
    // 禁止把独立组件放在这个数组里
  ],
  exports: [
    // 可选：如果其他模块要使用该组件，添加到此处
    ExchangeCategoriesAutocompleteComponent
  ]
})
export class YourFeatureModule { }

2. 确认独立组件的标记 #

确保你的组件已经开启了standalone: true配置，这是独立组件的核心标识：

import { Component } from '@angular/core';

@Component({
  selector: 'app-exchange-categories-autocomplete',
  templateUrl: './exchange-categories-autocomplete.component.html',
  styleUrls: ['./exchange-categories-autocomplete.component.css'],
  standalone: true // 必须启用这个配置
})
export class ExchangeCategoriesAutocompleteComponent { }

3. 处理组件的依赖 #

如果独立组件需要依赖其他模块（比如Angular Material组件、管道等），直接在组件自身的imports数组中引入，不需要通过NgModule传递：

@Component({
  selector: 'app-exchange-categories-autocomplete',
  templateUrl: './exchange-categories-autocomplete.component.html',
  styleUrls: ['./exchange-categories-autocomplete.component.css'],
  standalone: true,
  imports: [
    CommonModule,
    MatAutocompleteModule // 示例：引入所需的模块
  ]
})
export class ExchangeCategoriesAutocompleteComponent { }

额外提醒 #

Angular 14及以上才支持独立组件，你升级到15后完全适配，但要注意区分NgModule的imports（仅放模块）和独立组件的imports（放模块/其他独立组件）的差异。

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