Angular 15中获取组件原始HTML模板的实现方案咨询

我太懂这种版本升级后旧代码失效的糟心感了——之前Angular 8里靠读取组件装饰器元数据获取原始模板的方法，在Angular 15（已经全面使用Ivy编译器）里确实行不通了。因为Ivy彻底改变了装饰器的编译逻辑，不再把__annotations__这类内部属性暴露给我们了。不过别担心，有几个靠谱的替代方案能帮你摆脱手动维护HTML示例的麻烦：

方案一：直接在组件中导入原始模板内容 #

这是最直接的方式，利用webpack的asset modules（Angular 15默认用webpack 5）直接把HTML文件内容作为字符串导入到组件里，然后存为静态属性供外部访问：

1. 先调整tsconfig.json的配置，允许导入非JS/TS文件：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "strictMetadataEmit": false
  }
}

2. 在你的组件文件里导入原始HTML：

import { Component } from '@angular/core';
// 用?raw后缀告诉webpack直接读取文件原始内容
import rawTemplate from './example.component.html?raw';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent {
  // 把原始模板存为静态属性，外部可以直接通过ExampleComponent.rawTemplate获取
  public static readonly rawTemplate = rawTemplate;

  // ... 你的组件原有逻辑
}

这样不管你在文档项目里怎么引用这个组件，都能直接拿到最原始的HTML模板内容，完全不用担心同步问题。

方案二：批量提取所有组件模板（适合文档项目） #

如果你的文档需要批量获取所有组件的模板，写个Node.js脚本自动提取会更高效：

1. 先安装依赖：npm i glob --save-dev（用来遍历文件）
2. 创建提取脚本extract-templates.js：

const fs = require('fs');
const path = require('path');
const glob = require('glob');

// 组件所在的目录，根据你的项目结构调整
const componentsDir = path.join(__dirname, 'src/app/components');
// 输出的模板映射文件路径
const outputFile = path.join(__dirname, 'src/app/component-templates.json');

const templatesMap = {};

// 遍历所有.component.ts文件
glob.sync(`${componentsDir}/**/*.component.ts`).forEach(filePath => {
  const fileContent = fs.readFileSync(filePath, 'utf8');
  
  // 匹配@Component中的templateUrl
  const templateUrlMatch = fileContent.match(/templateUrl:\s*['"](.+?)['"]/);
  if (templateUrlMatch) {
    const templateFullPath = path.join(path.dirname(filePath), templateUrlMatch[1]);
    if (fs.existsSync(templateFullPath)) {
      const templateContent = fs.readFileSync(templateFullPath, 'utf8');
      // 用组件的selector作为键，方便文档里查找
      const selectorMatch = fileContent.match(/selector:\s*['"](.+?)['"]/);
      const key = selectorMatch ? selectorMatch[1] : path.basename(filePath, '.component.ts');
      templatesMap[key] = templateContent;
    }
  }
});

// 写入JSON文件
fs.writeFileSync(outputFile, JSON.stringify(templatesMap, null, 2));
console.log(`✅ 组件模板提取完成，已保存到 ${outputFile}`);

3. 在package.json的scripts里加一句：

"scripts": {
  "extract-templates": "node extract-templates.js",
  // ... 其他脚本
}

每次更新组件模板后，运行npm run extract-templates，文档项目直接导入component-templates.json就能拿到所有最新的原始模板了，完全不用手动复制粘贴。

为什么旧方法失效了？ #

简单说，Angular 9开始全面启用Ivy编译器，它不再像旧的View Engine那样把装饰器元数据（比如__annotations__）挂载到组件类上，tsickle的相关API也不再被默认使用，Reflect元数据如果没有额外配置也无法获取到这些信息，所以之前的代码自然就取不到值了。

备注：内容来源于stack exchange，提问作者Dubur