在TypeScript项目中，我们偶尔需要把HTML文件作为模块导入使用，比如在前端组件中直接引用模板内容，但很多时候会遇到模块查找错误，导致项目无法正常运行。下面我们就一步步解决这个问题。
问题复现
假设我们在TypeScript文件中尝试导入HTML文件，代码如下：
// index.ts import htmlTemplate from './template.html'; console.log(htmlTemplate);
此时TypeScript编译器会抛出错误，提示找不到模块./template.html或者其相应的类型声明，这就是典型的模块查找错误。
解决步骤
第一步：添加HTML模块声明文件
TypeScript本身不认识HTML文件的模块类型，我们需要创建一个自定义的类型声明文件，告诉TypeScript如何解析HTML模块。通常在项目根目录下创建custom.d.ts文件，内容如下：
// custom.d.ts
declare module '*.html' {
const content: string;
export default content;
}这段声明的意思是，所有以.html结尾的文件，导入后都会得到一个字符串类型的内容，默认导出就是这个字符串。
第二步：配置tsconfig.json
需要保证tsconfig.json能够识别到我们创建的声明文件，检查include或者files字段是否包含了声明文件所在的目录，通常配置如下：
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true
},
"include": [
"src/**/*",
"custom.d.ts"
]
}如果声明文件放在src目录下，也可以把include改为"src/**/*"，确保TypeScript能够扫描到声明文件。
第三步：验证导入效果
完成上述配置后，再次运行TypeScript项目，之前的模块查找错误就会消失，我们可以直接使用导入的HTML内容：
// index.ts import htmlTemplate from './template.html'; // 假设template.html内容是<div>hello</div> console.log(htmlTemplate); // 输出 <div>hello</div>
注意事项
- 如果使用的是webpack等打包工具，还需要确保对应的loader（比如html-loader）已经正确配置，否则即使TypeScript不报错，打包时也可能出现问题。
- 声明文件的后缀是.d.ts，不要写错，否则TypeScript无法识别类型声明。
- 如果项目中有多种非代码文件需要导入，可以参照HTML的声明方式，添加对应的模块声明，比如
declare module '*.svg'等。
按照上述步骤操作后，TypeScript项目中导入HTML文件的模块查找错误就可以完美解决了，整个流程简单清晰，适合大多数常规开发场景。
TypeScriptHTML导入模块声明模块查找错误tsconfig配置修改时间：2026-05-31 23:20:13