angular - eslint Angular Strict Template Checks 应该显示错误
问题描述
我们最近迁移到一个包含许多 Angular 11+ 应用程序和库的新项目。我们已经angularCompilerOptions.strictTemplates: true
为所有应用程序设置了。
问题是我们有一个 CI 管道来检查格式并运行 eslint,但是在我们进行生产构建之前,严格的模板检查错误不会被标记。因此,我们必须在 CI 中构建所有受影响的应用程序,如果我们更改库组件,则需要检查和构建所有应用程序。这可能需要几个小时。
有没有一种方法可以让 eslint/tslint 检查任何严格的模板错误,而无需每次都构建应用程序?
这是我们的 eslint.json:
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
"parserOptions": { "project": ["apps/to-home/tsconfig.*?.json"] },
"rules": {
"@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "toh", "style": "camelCase" }],
"@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "toh", "style": "kebab-case" }]
}
},
{ "files": ["*.html"], "extends": ["plugin:@nrwl/nx/angular-template"], "rules": {} }
]
}
和根json:
{
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["@nrwl/nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
"rules": {
"@typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"@typescript-eslint/no-empty-function": [
"error",
{
"allow": ["constructors"]
}
],
"@nrwl/nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [
"@models/*",
"@apc-common/**",
"@apc-directives/**",
"@apc-helpers/**",
"@apc-modals/**",
"@apc-models/**",
"@apc-pipes/**",
"@apc-services/**",
"@apc-store/**",
"@apc-admin/**",
"@apc-help/**",
"@apc-home/**",
"@apc-materials/**",
"@apc-materials-deferral-review/**",
"@apc-parking/**",
"@apc-report/**",
"@apc-turnover/**",
"@apc-wall-display/**",
"@apc-workload/**"
],
"depConstraints": [
{
"sourceTag": "scope:server",
"onlyDependOnLibsWithTags": ["scope:server", "scope:models"]
},
{
"sourceTag": "scope:ui",
"onlyDependOnLibsWithTags": ["scope:ui", "scope:shared", "scope:models"]
},
{
"sourceTag": "scope:shared",
"onlyDependOnLibsWithTags": ["scope:shared", "scope:models"]
},
{
"sourceTag": "scope:models",
"onlyDependOnLibsWithTags": ["scope:models"]
}
]
}
],
"@typescript-eslint/no-this-alias": [
"error",
{
"allowDestructuring": true,
"allowedNames": ["self"]
}
]
}
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:@nrwl/nx/typescript"],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:@nrwl/nx/javascript"],
"rules": {}
}
]
}
解决方案
可能您没有在开发环境中启用 aot。您可能只在 angular.json 的生产部分有 aot=true。要将其设置为所有配置,请执行以下操作:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
...
推荐阅读
- flutter - 一种 Signal 设置与当前的 firebase 依赖项不匹配
- mysql - 如何在 mySQL 中创建子实体?员工和厨师
- google-sheets - Google Spreadsheets QUERY() 按一个字段的值组合多张工作表
- swift - 处理 SpriteKit 碰撞的代码无法正常工作
- github-actions - github 操作发布失败 - NPM ERR 404
- python - cv2.Canny 中的低阈值参数和高阈值参数有什么区别?
- azure - Azure Storage Rest API 速度和带宽要求
- html - 输入文本到达末尾时不会转到下一行
- c# - 如何在 Linux 上为 .NET Core 应用程序设置密码规范首选项
- javascript - 如何将此相关下拉列表代码应用到 2 张而不是一张?