如何在Angular中禁用*ngIf，仅允许使用v17新控制流语法？

Angular官方目前没有提供内置的lint选项来直接禁止使用*ngIf、*ngFor这类旧模板指令，想要强制使用v17推出的@if、@for新控制流语法，需要通过自定义ESLint规则来实现。

实现步骤 #

1. 编写自定义ESLint规则
   借助@angular-eslint/template-parser解析Angular模板AST，检测模板中的旧指令属性并抛出违规提示。示例规则代码如下：

   // rules/no-legacy-template-directives.js
   module.exports = {
     create(context) {
       return {
         ElementAttribute(node) {
           const forbiddenDirectives = ['*ngIf', '*ngFor', '*ngSwitch'];
           if (forbiddenDirectives.includes(node.name)) {
             context.report({
               node,
               message: `请使用新的@${node.name.slice(1)}控制流语法替代${node.name}`
             });
           }
         }
       };
     }
   };
   

2. 配置ESLint引入自定义规则
   在项目的.eslintrc.json中添加自定义规则的引用：

   {
     "root": true,
     "plugins": ["@angular-eslint/template"],
     "overrides": [
       {
         "files": ["*.html"],
         "parser": "@angular-eslint/template-parser",
         "rules": {
           "custom/no-legacy-template-directives": "error"
         },
         "plugins": ["custom"]
       }
     ],
     "settings": {
       "eslint-plugin-custom": {
         "paths": ["./rules"]
       }
     }
   }
   

3. 可选：尝试社区规则
   部分第三方ESLint插件（如eslint-plugin-angular）可能包含类似规则，但需注意插件的维护状态与Angular版本兼容性，优先推荐自定义规则以精准适配项目需求。

内容的提问来源于stack exchange，提问作者zef