eslint Angular Strict Template Checks 应该显示错误

Posted 2023-03-13

【中文标题】eslint Angular Strict Template Checks 应该显示错误

【英文标题】：eslint Angular Strict Template Checks should show error

【发布时间】：2021-12-09 11:30:11

【问题描述】：

我们最近迁移到一个包含许多 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": 
    
  ]

【参考方案1】：

TypeScript 严格类型：严格模式是不够的， typescript-strictly-typed 启用 strictly 类型的 TypeScript、ESLint 或 TSLint 以及可选的 Angular 的配置。不过还是先解释一下吧。

官方推荐的使用 TypeScript 的方法是 strict mode。 创建时启用严格模式：

一个 TypeScript 项目 (tsc --init) 严格模式下的 Angular 应用 (ng new --strict)

严格模式激活 2 个主要编译器选项：

noImplicitAny

strictNullChecks

现在，TypeScript 会询问值何时可以为空 (strictNullChecks)，当无法推断时，它会询问类型 (noImplicitAny)。

即使在严格模式下，下面的代码也会编译：TypeScript 仍然接受显式 anys

function test(hello: any, world = '') 
  hello; // any
  world; // string

TSLint 具有no-any 规则。使用 ESLint 和 @typescript-eslint no-explicit-any 规则：

.eslintrc.json

  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": 
    "@typescript-eslint/no-explicit-any": "error"
  

角度严格： Angular 有自己额外的严格编译器选项：tsconfig.json

  "angularCompilerOptions": 
    "strictInjectionParameters": true,
    "strictTemplates": true,
    "strictInputAccessModifiers": true
  

我们只需要运行 ng build 就可以在 Angular 9 及更高版本中看到这个错误。而在 Angular 8 中，我们在运行 ng build 时没有看到此错误消息。

自动配置： 启用严格类型的 TypeScript、ESLint 或 TSLint 以及可选的 Angular 的配置。 只需在您的项目中运行 npx typescript-strictly-typed。

【讨论】：

这并不能解决模板检查的问题，我知道检查模板的唯一方法是使用 ng build --prod 命令。我们如何在构建之前检查模板是否会失败？

【参考方案2】：

可能您没有在开发环境中启用 aot。 您可能只在 angular.json 的生产部分有 aot=true。 要将其设置为所有配置，请执行以下操作：

"architect": 
    "build": 
      "builder": "@angular-devkit/build-angular:browser",
      "options": 
        "aot": true,
...