angular - Karma 在阅读 typescript 时抛出 "Module parse failed"

Question

repo 示例:https://github.com/OriolInvernonLlaneza/karma-webpack-error-example
我在 Angular 11 和 Webpack 4 上正确运行了 Karma + Jasmine 测试。但是，当尝试将 Angular 和 Webpack 更新到 v12 和 v5 时，我在启动测试时遇到了以下错误:

这是我的 karma 配置:

module.exports = (config) => {
  config.set({
    // ... normal karma configuration

    // make sure to include webpack as a framework
    frameworks: ['jasmine', 'webpack'],

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

    files: [
      // all files ending in ".spec.ts"
      // !!! use watched: false as we use webpacks watch
      { pattern: './src/**/*.spec.ts', watched: false }
    ],

    preprocessors: {
      // add webpack as preprocessor
      "**/*.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，因为我找不到解决此问题的方法。

Answer 1

ts-loader 6.x.x与 webpack 5.x.x 不兼容.基于 documentation ts-loader 9.x.x需要与webpack 5.x.x一起使用.
请尝试更新 ts-loader到最新版本。它可能无法完全解决问题，但让我们尝试一下。