仿Angular实现TypeScript父类动态导入HTML模块失败求助

问题描述 #

我是TypeScript和Webpack新手，正在研究Angular的运行机制，目前遇到一个问题：在TypeScript父类中导入HTML文件失败。将buildDomNode方法移到子类HomeComponent中时，导入templatePath可以正常工作，但该方法需要定义在父类中以实现复用。

示例代码 #

子类（HomeComponent.ts）

// src/components/HomeComponent.ts
// src/components/HomeComponent.xhtml

import {BaseTemplatedWidget, Component} from '../lib/BaseWidget';

@Component({
    selector: "HomeComponent",
    templatePath: "./HomeComponent.xhtml"
})
export default class HomeComponent extends BaseTemplatedWidget {
    constructor() {
        super();
    }
}

父类（BaseWidget.ts）

// Parent Class
export class BaseTemplatedWidget extends BaseWidget {
    templatePath: string;

    constructor() {
        super();
        this._initMetaData();
    }

    _initMetaData() {
        this.selector = Reflect.getMetadata(symbolSelector, this) || "";
        this.templatePath = Reflect.getMetadata(symbolTemplatePath, this) || "";
    }

    async buildDomNode(): Promise<Element> {
        console.log("# buildDomNode:", this.templatePath);
        try {
            const {default: tempStr} = await import(`${this.templatePath}`);
            let container = document.createElement("div");
            container.innerHTML = tempStr;
            let template: HTMLTemplateElement = container.querySelector("template");
            if (template) this._node = template.content.cloneNode(true) as Element;
        } catch(error) {
            console.log("[error] fail to build DOM node with error", error);
        }
        return this._node;
    }
}

浏览器错误信息 #

[error] fail to build DOM node with error Error: Cannot find module './HomeComponent.xhtml'

Webpack配置（webpack.config.js） #

import path from 'path';
import { fileURLToPath } from 'url';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    src: "/"
  },
  devtool: "inline-source-map",
  node: {__filename: true},
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  resolve: {
    alias: {component: path.join(__dirname, "/src")},
    extensions: ['.js', '.ts', '.html']
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'html',
      template: './index.html',
      inject: 'head'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ['ts-loader']
      },
      {
        test: /\.(html|xhtml)$/,
        use: ['html-loader']
      },
      {
        test: /\.(css|scss|sass|less)$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
      }
    ]
  }
};

问题原因 #

核心问题在于Webpack的静态分析机制：

• Webpack在编译阶段会静态扫描代码中的import语句，只能识别固定的字符串路径，无法解析运行时动态拼接的路径（比如await import(${this.templatePath})）。
• 当import语句写在子类时，路径是静态固定的（比如import("./HomeComponent.xhtml")），Webpack能提前识别并将对应的HTML文件打包进bundle，所以能正常工作。

解决方案 #

方案1：子类静态导入模板，传递给父类 #

这是最直接的方案，在子类中提前静态导入模板文件，然后通过构造函数传递给父类，父类直接使用传入的模板字符串构建DOM：

修改后的子类代码

// src/components/HomeComponent.ts
import {BaseTemplatedWidget, Component} from '../lib/BaseWidget';
import template from './HomeComponent.xhtml'; // 静态导入模板

@Component({
    selector: "HomeComponent",
    templatePath: "./HomeComponent.xhtml"
})
export default class HomeComponent extends BaseTemplatedWidget {
    constructor() {
        super(template); // 将模板字符串传给父类
    }
}

修改后的父类代码

export class BaseTemplatedWidget extends BaseWidget {
    private template: string;

    constructor(template: string) {
        super();
        this.template = template;
        this._initMetaData();
    }

    _initMetaData() {
        this.selector = Reflect.getMetadata(symbolSelector, this) || "";
        this.templatePath = Reflect.getMetadata(symbolTemplatePath, this) || "";
    }

    async buildDomNode(): Promise<Element> {
        try {
            let container = document.createElement("div");
            container.innerHTML = this.template;
            let templateElement: HTMLTemplateElement = container.querySelector("template");
            if (templateElement) this._node = templateElement.content.cloneNode(true) as Element;
        } catch(error) {
            console.log("[error] fail to build DOM node with error", error);
        }
        return this._node;
    }
}

方案2：使用require.context预加载所有模板 #

如果有大量组件模板需要管理，可以用Webpack的require.context批量预加载指定目录下的所有模板文件，父类通过组件的selector匹配对应的模板：

修改后的父类代码

// 在父类所在文件中创建模板上下文，预加载components目录下的所有xhtml文件
const templateContext = require.context('../components', true, /\.xhtml$/);

export class BaseTemplatedWidget extends BaseWidget {
    templatePath: string;
    selector: string;

    constructor() {
        super();
        this._initMetaData();
    }

    _initMetaData() {
        this.selector = Reflect.getMetadata(symbolSelector, this) || "";
        this.templatePath = Reflect.getMetadata(symbolTemplatePath, this) || "";
    }

    async buildDomNode(): Promise<Element> {
        try {
            // 假设selector和模板文件名一致，拼接路径
            const targetTemplatePath = `./${this.selector}.xhtml`;
            const tempStr = templateContext(targetTemplatePath);
            
            let container = document.createElement("div");
            container.innerHTML = tempStr;
            let templateElement: HTMLTemplateElement = container.querySelector("template");
            if (templateElement) this._node = templateElement.content.cloneNode(true) as Element;
        } catch(error) {
            console.log("[error] fail to build DOM node with error", error);
        }
        return this._node;
    }
}

方案3：优化动态导入路径（有限支持） #

如果想保留动态导入的写法，需要给Webpack提供足够的静态路径信息，让它能识别需要打包的文件范围：

修改父类中的导入语句

async buildDomNode(): Promise<Element> {
    console.log("# buildDomNode:", this.templatePath);
    try {
        // 固定前缀，让Webpack知道要打包../components目录下的xhtml文件
        const {default: tempStr} = await import(`../components/${this.templatePath}`);
        let container = document.createElement("div");
        container.innerHTML = tempStr;
        let templateElement: HTMLTemplateElement = container.querySelector("template");
        if (templateElement) this._node = templateElement.content.cloneNode(true) as Element;
    } catch(error) {
        console.log("[error] fail to build DOM node with error", error);
    }
    return this._node;
}

注意：这种方式要求templatePath是相对../components的路径，且Webpack会打包该目录下所有符合扩展名的文件，可能会增加bundle体积。

内容的提问来源于stack exchange，提问作者Trung Nguyen Dang