Angular混合应用新增组件后出现构造函数注入及注解错误求助

我来帮你排查这个新增组件后出现的错误！这个提示‘请移除构造函数中的注入 - 请添加@Pipe/@Directive/@Component注解’，本质是Angular编译器没识别到你的组件类是合法的Angular组件，或者模块配置出了问题，结合你的场景，我整理了几个必查的方向：

1. 先检查KekComponent的装饰器是否完整 #

这是最常见的原因！你得确保kek.component.ts顶部正确添加了@Component装饰器，而且元数据配置齐全。比如：

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

@Component({
  selector: 'app-kek', // 必须有唯一的选择器
  templateUrl: './kek.component.html', // 或者用template写内联模板
  styleUrls: ['./kek.component.css']
})
export class KekComponent {
  // 要是构造函数里有注入服务，得确保那个服务已经在模块里声明为providers
  constructor() {
    // ...你的组件逻辑
  }
}

如果组件里有注入的服务，别忘在对应的NgModule的providers数组里注册它。

2. 确认NgModule的declarations配置正确 #

你的新增模块代码看起来没写完，一定要把KekComponent加入到declarations数组里——Angular需要知道这个模块管理哪些组件。补全后的模块代码应该是这样：

import {NgModule} from '@angular/core'; 
import {CommonModule} from '@angular/common'; 
import {KekComponent} from './kek.component'; 

@NgModule({ 
  imports: [CommonModule],
  declarations: [KekComponent], // 这行必须加！
  exports: [KekComponent] // 如果其他模块要用到这个组件，记得导出
})
export class KekModule { }

另外要注意：同一个组件不能在多个模块里声明，要是之前在别的模块加过，得删掉重复的。

3. 排查是否误把组件当作服务注入 #

要是你在其他组件或者服务的构造函数里写了constructor(private kekComp: KekComponent)，这绝对是错的！组件是用来在模板里渲染的，不能当作依赖注入，赶紧把这个注入代码删掉，改用模板标签<app-kek>来使用组件。

4. 混合应用的特殊检查 #

因为是Angular和AngularJS混合应用，还要确认新增的组件有没有正确和AngularJS集成：

• 如果要在AngularJS页面里用这个Angular组件，得用downgradeComponent把它降级，然后在AngularJS模块里注册。
• 检查有没有和AngularJS的模块、服务命名冲突的情况，比如组件选择器和AngularJS指令重名了。

最后试试清理缓存 #

有时候项目缓存会导致奇怪的编译错误，你可以运行npm cache clean --force，然后删掉node_modules和dist文件夹，重新npm install再构建项目，说不定就能解决。

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