[英]Q: Angular components broken - "Class is using Angular features but is not decorated. Please add an explicit Angular decorator"
After many hours of trying to find a solution, I have come up short.经过数小时的努力寻找解决方案,我做不到了。 Without fail, every time I generate a new component in my Angular app it is the same message.
毫无疑问,每次我在我的 Angular 应用程序中生成一个新组件时,它都是相同的消息。 "Class is using Angular features but is not decorated. Please add an explicit Angular decorator"
“类正在使用 Angular 功能但未装饰。请添加显式 Angular 装饰器”
Below are some of my components and their decorators.下面是我的一些组件和它们的装饰器。
And even a test component fresh out of the CLI for good measure.甚至是从 CLI 中新鲜出来的测试组件也可以很好地衡量。
I know I can get rid of the problem by removing OnInit implementation.我知道我可以通过删除 OnInit 实现来解决这个问题。 But in other components I do need it.
但在其他组件中,我确实需要它。
Things I have tried我尝试过的事情
delete node_modules, reinstall and downgrade and upgrade TypeScript version from 4.7.2 to 4.8.2 then to 4.7.2 again.删除 node_modules,重新安装并降级并将 TypeScript 版本从 4.7.2 升级到 4.8.2,然后再次升级到 4.7.2。
TS Config 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 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"
}
I also appear to have lost auto-complete for adding components in the html file.我似乎也失去了在 html 文件中添加组件的自动完成功能。 Eg in app module - no dropdown after typing <app-...>.
例如在应用程序模块中 - 键入 <app-...> 后没有下拉菜单。 Any suggestions?
有什么建议么?
Hopefully this helps希望这会有所帮助
You'll need to add a @Component
decorator to that base class (which should probably also be declared abstract).您需要将
@Component
装饰器添加到该基础 class (可能也应该声明为抽象)。
This is the bare minimum you can get away with in Angular 9:这是您在 Angular 9 中可以摆脱的最低限度:
@Component({
template: ''
})
export abstract class ComponentName {
@Input() teamName: string;
@Input() teamSize: number;
@Input() players: any;
}
For Angular 10+, see this answer对于 Angular 10+, 请参阅此答案
It was my folder structure (atleast I believe).这是我的文件夹结构(至少我相信)。
I had node modules of my server and ts config in the root of my folder, and then my client app as a folder in the root too.我的服务器的节点模块和 ts 配置在我的文件夹的根目录中,然后我的客户端应用程序也作为根目录中的文件夹。
The solution was to move EVERYTHING related to server into its own folder, no node modules or ts config.解决方案是将与服务器相关的所有内容移动到自己的文件夹中,没有节点模块或 ts 配置。
reponame, client and server folders. reponame、客户端和服务器文件夹。 not client and server folders, with server tsconfig and node modules in root.
不是客户端和服务器文件夹,服务器 tsconfig 和节点模块位于根目录中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.