问：Angular 组件损坏 - “类正在使用 Angular 功能但未装饰。请添加显式 Angular 装饰器”

Question

经过数小时的努力寻找解决方案，我做不到了。 毫无疑问，每次我在我的 Angular 应用程序中生成一个新组件时，它都是相同的消息。 “类正在使用 Angular 功能但未装饰。请添加显式 Angular 装饰器”

下面是我的一些组件和它们的装饰器。

甚至是从 CLI 中新鲜出来的测试组件也可以很好地衡量。

我知道我可以通过删除 OnInit 实现来解决这个问题。 但在其他组件中，我确实需要它。

我尝试过的事情

删除 node_modules，重新安装并降级并将 TypeScript 版本从 4.7.2 升级到 4.8.2，然后再次升级到 4.7.2。

TS 配置

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Package.json

"dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/cdk": "^14.2.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "daisyui": "^2.24.0",
    "qs": "^6.11.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.2",
    "@angular/cli": "~14.1.2",
    "@angular/compiler-cli": "^14.1.0",
    "@tailwindcss/forms": "^0.5.2",
    "@types/jasmine": "~4.0.0",
    "autoprefixer": "^10.4.8",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.7.2"
  }

我似乎也失去了在 html 文件中添加组件的自动完成功能。 例如在应用程序模块中 - 键入 <app-...> 后没有下拉菜单。 有什么建议么？

Answer 1

希望这会有所帮助

您需要将@Component装饰器添加到该基础 class （可能也应该声明为抽象）。

这是您在 Angular 9 中可以摆脱的最低限度：

@Component({
  template: ''
})
export abstract class ComponentName {

    @Input() teamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

对于 Angular 10+， 请参阅此答案

请从答案中检查解决方案

Answer 2

这是我的文件夹结构（至少我相信）。

我的服务器的节点模块和 ts 配置在我的文件夹的根目录中，然后我的客户端应用程序也作为根目录中的文件夹。

解决方案是将与服务器相关的所有内容移动到自己的文件夹中，没有节点模块或 ts 配置。

reponame、客户端和服务器文件夹。 不是客户端和服务器文件夹，服务器 tsconfig 和节点模块位于根目录中。