升级Angular12、Webpack5后Karma读取TS抛Module parse failed报错如何解决

示例仓库地址：https://github.com/OriolInvernonLlaneza/karma-webpack-error-example

问题描述 #

Angular 11 + Webpack 4环境下Karma + Jasmine测试可正常运行，将Angular升级至v12、Webpack升级至v5后，启动测试时出现如下报错：

相关配置 #

Karma配置 #

module.exports = (config) => {
  config.set({
    // ... 常规karma配置

    // 需将webpack纳入框架
    frameworks: ['jasmine', 'webpack'],

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-jasmine-html-reporter',
      'karma-coverage-istanbul-reporter',
      'karma-sourcemap-loader',
    ],

    files: [
      // 所有以.spec.ts结尾的文件
      // 注意设置watched: false，因为我们使用webpack的监听能力
      { pattern: './src/**/*.spec.ts', watched: false }
    ],

    preprocessors: {
      // 配置webpack为预处理器
      "**/*.ts": ['webpack', 'sourcemap']
    },

    browsers: ['Chrome'],
    reporters: ['progress'],
    port: 9876,

    webpack: {
      externals: [
        /^@example\/*/,
      ],
      module: {
        rules: [
          {
            test: /\.ts$/,
            loader: 'ts-loader',
          },
        ],
      },
    }
  });
}

Webpack配置 #

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default
const path = require('path');

module.exports = (angularWebpackConfig, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);
  
  singleSpaWebpackConfig.externals = [
    /^@example\/*/,
  ];

  singleSpaWebpackConfig.condig.resolve.extensions = ['', '.ts', '.js']

  singleSpaWebpackConfig.module.rules = [
      { test: /\.ts$/, use: ['angular2-template-loader', 'ts-loader'], exclude: './node_modules' },
      { test: /\.js$/, use: 'babel-loader', exclude: './node_modules' }
  ];
}

package.json配置 #

"dependencies": {
    "@angular/common": "~12.1.3",
    "@angular/compiler": "~12.1.3",
    "@angular/core": "~12.1.3",
    "@angular/forms": "~12.1.3",
    "@angular/platform-browser": "~12.1.3",
    "@angular/platform-browser-dynamic": "~12.1.3",
    "@angular/router": "~12.1.3",
    "angular-i18next": "^10.3.0",
    "core-js": "^3.6.4",
    "i18next": "^20.3.5",
    "rxjs": "^6.6.7",
    "single-spa": "~5.9.3",
    "single-spa-angular": "~5.0.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "12",
    "@angular-devkit/build-angular": "~12.1.3",
    "@angular/cli": "~12.1.3",
    "@angular/compiler-cli": "~12.1.3",
    "@angular/language-service": "~12.1.3",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@types/jasmine": "^3.6.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^16.4.5",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^9.6.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "enhanced-resolve": "^4.1.1",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "karma-source-map-support": "^1.4.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^5",
    "ts-loader": "^9.2.5",
    "ts-node": "^10.2.1",
    "tslib": "^2.0.0",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "webpack": "^5",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }

.babelrc配置 #

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ],
  "plugins": [
    "@babel/syntax-dynamic-import"
  ]
}

最终处理 #

由于未能找到该问题的解决方案，已将测试框架切换为Jest。

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