問：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 和節點模塊位於根目錄中。