Angular中如何强制TypeScript变量为合法HTML模板？

一、编译阶段实现方案 #

TypeScript本身没有内置HTML语法校验能力，但可以通过自定义类型守卫+静态代码分析工具组合实现近似效果：

1. 自定义HTML校验类型守卫
   借助第三方HTML解析库（如parse5）编写运行时校验函数，结合TypeScript类型守卫约束变量的合法赋值路径：

import { parse } from 'parse5';

// 校验HTML合法性的类型守卫
function isValidHTML(html: string): html is string {
  try {
    const document = parse(html);
    return !checkUnclosedTags(document) && !checkInvalidTags(document);
  } catch (e) {
    return false;
  }
}

// 检查未闭合标签的辅助函数
function checkUnclosedTags(node: any): boolean {
  if (node.tagName && !['br', 'img'].includes(node.tagName)) {
    // 遍历DOM树判断标签是否正确闭合
    return node.childNodes?.some((child: any) => {
      return child.tagName === node.tagName || checkUnclosedTags(child);
    }) || false;
  }
  return false;
}

// 检查非法标签的辅助函数
function checkInvalidTags(node: any): boolean {
  const validTags = ['div', 'p', 'span', 'h1', 'h2']; // 可扩展合法标签列表
  if (node.tagName && !validTags.includes(node.tagName)) {
    return true;
  }
  return node.childNodes?.some((child: any) => checkInvalidTags(child)) || false;
}

// 使用示例
const validHTML = '<div>bla…</div>';
if (isValidHTML(validHTML)) {
  let v = validHTML; // 编译通过，类型守卫确保合法性
}

const invalidHTML = '<cc></div>';
if (isValidHTML(invalidHTML)) {
  let v = invalidHTML; // 编译器不会直接报错，但运行时不会进入此分支
}

这种方式是运行时校验+类型提示，无法直接在编译阶段阻断非法赋值，但能约束变量的合法使用路径。

2. 自定义ESLint规则
   编写ESLint规则，在IDE实时校验或编译前置步骤中扫描TypeScript代码中的HTML字符串：

• 提取代码中的字符串字面量，调用parse5或html-validate进行校验
• 配置ESLint规则为错误级别，非法HTML会在IDE中实时提示，编译阶段（若开启ESLint校验）会直接阻断

二、构建阶段实现方案 #

如果编译阶段的方案无法满足需求，可以通过自定义Angular Builder或前置构建脚本实现构建阻断：

1. 自定义Angular Builder
   基于@angular-devkit/build-angular扩展，在构建流程中插入HTML校验步骤：

import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { executeBrowserBuilder } from '@angular-devkit/build-angular';
import { readFileSync, readdirSync } from 'fs';
import { join } from 'path';
import { parse } from 'parse5';

export default createBuilder(async (options, context: BuilderContext): Promise<BuilderOutput> => {
  // 先执行默认Angular构建逻辑
  const buildResult = await executeBrowserBuilder(options, context);
  if (!buildResult.success) return buildResult;

  // 扫描项目源码中的TypeScript文件
  const srcDir = join(context.workspaceRoot, 'src');
  const tsFiles = findTsFiles(srcDir);
  let hasInvalidHTML = false;

  for (const file of tsFiles) {
    const content = readFileSync(file, 'utf-8');
    // 正则匹配赋值为字符串的变量（简单示例，可优化匹配逻辑）
    const htmlAssignments = content.match(/let\s+\w+\s*=\s*['"](.*?)['"]/g) || [];
    
    for (const assignment of htmlAssignments) {
      const htmlContent = assignment.match(/['"](.*?)['"]/)?.[1];
      if (htmlContent && !isValidHTML(htmlContent)) {
        context.logger.error(`非法HTML内容，文件：${file}，内容：${htmlContent}`);
        hasInvalidHTML = true;
      }
    }
  }

  return {
    success: !hasInvalidHTML,
    ...buildResult,
  };
});

// 复用之前的isValidHTML及辅助函数
function isValidHTML(html: string): boolean {
  try {
    const document = parse(html);
    return !checkUnclosedTags(document) && !checkInvalidTags(document);
  } catch (e) {
    return false;
  }
}

function checkUnclosedTags(node: any): boolean { /* 实现同前 */ }
function checkInvalidTags(node: any): boolean { /* 实现同前 */ }

// 递归查找所有.ts文件
function findTsFiles(dir: string): string[] {
  let files: string[] = [];
  const items = readdirSync(dir, { withFileTypes: true });
  for (const item of items) {
    if (item.isDirectory()) {
      files = [...files, ...findTsFiles(join(dir, item.name))];
    } else if (item.name.endsWith('.ts')) {
      files.push(join(dir, item.name));
    }
  }
  return files;
}

在angular.json中替换默认的build builder为自定义实现，构建时会自动校验HTML合法性，非法内容会导致构建失败。

2. 前置Node.js脚本
   编写独立Node.js脚本，在Angular构建前执行：

• 遍历项目.ts文件，提取HTML字符串变量
• 用html-validate库进行合法性校验
• 发现非法值时抛出错误，终止后续构建
  修改package.json的构建脚本：

"scripts": {
  "validate-html": "node ./scripts/validate-html.js",
  "build": "npm run validate-html && ng build"
}

三、实用工具推荐 #

• parse5：强大的HTML解析库，能处理各种HTML语法，适合校验标签闭合、结构合法性
• html-validate：专门的HTML校验工具，支持自定义规则，可直接集成到构建流程
• eslint-plugin-html：辅助ESLint处理HTML相关校验逻辑

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