如何从命令行启动Angular * .html文件？

Question

我想通过命令行添加html角度模板文件，类似于：

ng lint

我想验证Angular html模板以检查它们是否有效以及变量是否正确，因此可以在诸如Travis或AWS Codebuild之类的CI管道中运行它。

Visual Studio代码运行Angular Language Services，并且可以执行以下操作：

我想要捕获这些错误，以免无效的Angular html模板进入发行版。

我该如何实现？

Answer 1

实际上，您在这里看到的是Typescript错误，而不是棉绒错误。

有一个选项fullTemplateTypeCheck，当您激活AOT时，可以在构建期间捕获此类错误：

  

此选项告诉编译器启用模板编译器的绑定表达式验证阶段，该阶段使用TypeScript验证绑定表达式。

     

此选项默认为false。

     

注意：建议将此值设置为true，因为将来此选项将默认为true。

实际上，这可能会大大降低构建速度，因此，如果只想在CI管道中使用它，该怎么办：

在tsconfig.app.json旁边创建一个新的tsconfig.strict.json，如下所示：

{
  "extends": "./tsconfig.app.json",
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

在angular.json中，在项目> YourProject> architect> build>配置下添加一个新配置“ strictProd”，如下所示：

"strictProd": {
   "tsConfig": "src/tsconfig.app.strict.json",
   "aot": true
   [...your other prod settings here],
}

使用ng build -c strictProd

运行它

Answer 2

我发现最好的是html提示节点包。您可以在这里阅读有关内容：https://htmlhint.com/docs/user-guide/getting-started

这是与Angular一起使用的.htmlhintrc的设置。

{ “ tagname-lowercase”：是的， “ attr-lowercase”：否， “ attr-value-double-quotes”：是的， “属性值非空”：false， “无重复”：是的， “ doctype-first”：false， “标签对”：正确， “标签自闭”：正确， “空标记不自封闭”：是的， “ spec-char-escape”：否， “ id-unique”：否， “ src-not-empty”：是的， “ title-require”：是的， “ alt-require”：是的， “ doctype-html5”：是的， “ id-class-value”：“ true”， “样式无效”：true， “禁用内联样式”：true， “禁用内联脚本”：true， “ space-tab-mixed-disabled”：“ true”， “ id-class-ad-disabled”：是的， “ href-abs-or-rel”：否， “ attr-unsafe-chars”：是的， “禁用标题脚本”：true }