Angular项目集成自动补全库报错：NgAutoCompleteModule声明错误

哎，这个错误我太熟了！你这是犯了Angular模块配置里的一个常见小错误，咱们一步步来搞定它：

错误核心原因 #

你看到的 Unexpected module 'NgAutoCompleteModule' declared by the module 'AppModule' 错误，本质是把Angular模块（Module）错误放到了@NgModule的declarations数组里。

Angular的declarations数组只能放组件（Component）、指令（Directive）、管道（Pipe），而模块必须放在imports数组中，这是Angular模块系统的基本规则。

针对ng2-input-autocomplete的修复步骤 #

1. 修正AppModule的配置 #

打开你的app.module.ts，做两个关键修改：

• 把NgAutoCompleteModule从declarations数组中彻底移除
• 在imports数组中添加NgAutoCompleteModule（记得先在文件顶部导入它）

示例代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgAutoCompleteModule } from 'ng2-input-autocomplete'; // 先导入模块
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
    // ❌ 这里绝对不能放NgAutoCompleteModule！
  ],
  imports: [
    BrowserModule,
    NgAutoCompleteModule // ✅ 模块必须在这里导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 关于SystemJS配置的说明 #

你提到找不到SystemJS文件是正常的——Angular CLI创建的项目默认使用Webpack作为打包工具，完全不需要SystemJS的配置。库文档里提到的SystemJS映射是给老版本Angular（搭配SystemJS打包）的项目用的，你直接忽略这部分内容就行，CLI项目不需要任何额外的SystemJS配置。

3. 额外检查点 #

如果修复后还是有问题，建议：

• 确认ng2-input-autocomplete的版本和你的Angular版本兼容（查看库的package.json里的peerDependencies）
• 重新执行一次npm install确保依赖安装完整
• 重启Angular开发服务器（有时候缓存会导致配置不生效）

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