Angular创建弹窗组件报NG6001、NG1005错误如何解决？

错误原因与解决方案 #

两个错误存在关联，第二个错误是根因，修复后第一个错误会同步消失： #

错误2（NG1005：参数上存在意外的inject装饰器）修复方案 #

你混淆了Angular两种注入方式的写法：

方案1：使用装饰器模式注入（构造函数参数用法）

你当前代码里用的@inject()是小写，属于函数式注入的API，不能作为装饰器用在构造函数参数上，需要做两处修改：

• 导入时把小写的inject替换为大写的Inject装饰器
• 构造函数参数里的@inject改为@Inject
  修改后的ea-zimmerkat-dialog.component.ts对应代码如下：

// 导入大写的Inject装饰器
import { Component, OnInit, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {category} from "../../category";

@Component({
  selector: 'app-ea-zimmerkat-dialog',
  templateUrl: './ea-zimmerkat-dialog.component.html',
  styleUrls: ['./ea-zimmerkat-dialog.component.css']
})
export class EaZimmerkatDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<EaZimmerkatDialogComponent>,
    // 改为大写的@Inject装饰器
    @Inject(MAT_DIALOG_DATA) public data: category) {}

  ngOnInit(): void {
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

方案2：使用函数式注入（可选）

如果你想用小写的inject函数，可以不用写构造函数参数，直接给类属性赋值，写法如下：

import { Component, OnInit, inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {category} from "../../category";

@Component({
  selector: 'app-ea-zimmerkat-dialog',
  templateUrl: './ea-zimmerkat-dialog.component.html',
  styleUrls: ['./ea-zimmerkat-dialog.component.css']
})
export class EaZimmerkatDialogComponent implements OnInit {
  // 直接用inject函数注入，不需要加构造函数参数
  dialogRef = inject(MatDialogRef<EaZimmerkatDialogComponent>);
  data = inject<category>(MAT_DIALOG_DATA);

  ngOnInit(): void {
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

错误1（NG6001：类EaZimmerkatDialogComponent不是指令、组件或管道）修复方案 #

这个错误是第二个错误的连锁反应：因为你组件代码里的装饰器写法错误，Angular编译器无法正确识别@Component()装饰器的有效性，误判这个类不是合法的Angular组件。只要把上面第二个错误修复完成，重新启动应用，这个报错会自动消失，不需要修改app.module.ts里的代码。

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