eslint Angular 严格模板检查应显示错误

Question

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

Answer 1

TypeScript 严格类型化：严格模式还不够，\n typescript-strictly-typed启用strictly类型化 TypeScript、ESLint 或 TSLint 以及可选的 Angular 的配置。但先让\xe2\x80\x99s 解释一下。

\n

官方推荐的使用 TypeScript 的方式是严格模式。\n
创建时启用严格模式：

\n

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

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

noImplicitAny\n\nstrictNullChecks\n

\n

现在，TypeScript将询问值何时可以为 null ( strictNullChecks)，而当无法进行推理时，将询问类型 ( noImplicitAny)。

\n

即使在严格模式下，以下代码也将编译：TypeScript 仍然接受显式的任何值

\n

function test(hello: any, world = \'\') {\n  hello; // any\n  world; // string\n}\n

\n

TSLint有“无任何”规则。使用 ESLint 和@typescript-eslint no-explicit-any规则：

\n

.eslintrc.json

\n

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

\n

Angular 严格：
\nAngular 有自己的附加严格编译器选项：
\n tsconfig.json

\n

{\n  "angularCompilerOptions": {\n    "strictInjectionParameters": true,\n    "strictTemplates": true,\n    "strictInputAccessModifiers": true\n  }\n}\n

\n

我们只需运行ng buildAngular 9 及以上版本即可看到此错误。而在 Angular 8 中，我们在运行时没有看到此错误消息ng build。

\n

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

\n