Angular项目npm test报错：需配置loader处理report.mrt文件

AI 小北

2026-7-15

解决Angular测试环境无法处理.mrt文件的问题

你的问题根源在于：Angular开发服务器（npm serve）的构建规则已经在angular.json中配置了处理.mrt文件的loader，但Karma测试环境使用独立的Webpack配置，默认没有同步这个规则，导致测试时无法解析该文件类型。

解决步骤如下：

安装所需loader
首先根据你的需求安装对应的loader：
- 如果需要把.mrt文件内容作为字符串导入，安装raw-loader：
```
npm install raw-loader --save-dev
```
- 如果需要将文件复制到测试输出目录并返回文件路径，安装file-loader：
```
npm install file-loader --save-dev
```

修改Karma配置文件
打开项目根目录的karma.conf.js（或karma.conf.ts），找到webpack配置块（如果没有则新增），添加处理.mrt文件的规则：

示例（使用raw-loader）：

module.exports = function(config) {
  config.set({
    // 保留原有配置...
    webpack: {
      module: {
        rules: [
          // 新增.mrt文件处理规则
          {
            test: /\.mrt$/,
            use: 'raw-loader'
          }
        ]
      }
    }
  });
};

示例（使用file-loader）：

module.exports = function(config) {
  config.set({
    // 保留原有配置...
    webpack: {
      module: {
        rules: [
          {
            test: /\.mrt$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]'
                }
              }
            ]
          }
        ]
      }
    }
  });
};

添加TypeScript类型声明
避免TypeScript编译报错，在项目src目录下创建typings.d.ts文件（如果已存在则直接编辑），添加以下内容：
```
// 对应raw-loader/file-loader的类型声明
declare module '*.mrt' {
  const content: string;
  export default content;
}
```
重新运行测试
执行npm test，此时Karma应该能正常解析.mrt文件，测试即可正常运行。