阅读打字稿时，Karma 抛出“模块解析失败”

Question

回购示例：https://github.com/OriolInvernonLlaneza/karma-webpack-error-example

我使用 Angular 11 和 Webpack 4 正确运行了 Karma + Jasmine 测试。但是，在尝试将 Angular 和 Webpack 更新到 v12 和 v5 时，我在启动测试时遇到以下错误：

这是我的 Karma conf：

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 不兼容。基于documentationts-loader 9.x.x需要配合webpack 5.x.x使用。

请尝试将ts-loader 更新到最新版本。它可能无法完全解决问题，但让我们尝试一下。

Answer 2

根据您的错误，您的问题肯定出在 ts 文件上，因为它指出“./src/test.ts 中的错误”

请将ts-loader 更新到版本 9，如 github Compatibility documentation for ts-loader 所述：

TypeScript：3.6.3+

webpack：5.x+（如果需要 webpack 4 支持，请使用 ts-loader 8.x）

节点：12.x+

还有Research states以下：

现在支持的最低 webpack 版本是 webpack 5。这简化了代码库，以前必须根据正在使用的 webpack 版本来 if/else 各种 API 注册。 现在支持的最低节点版本是节点 12

根据webpack documentation 的说法：

Webpack 5 至少需要 Node.js 10.13.0 (LTS)

将 webpack-cli 升级到最新的可用版本（使用时）

所以要清楚：

ts-loader - 至少要更新到第 9 版。

node - 至少要更新到版本 12。

我注意到你为 ts 使用了 2 个加载器，我不确定 webpack 5 是否支持 angular2-template-loader，因为它是根据 angular2-template-loader documentation 于 5 年前发布的。

通过查看webpack Integration documentation，专门用于使用karma 进行集成，它说您可以在karma.config 中添加webpack 配置。所以它让我相信它可能很难阅读你的webpack.config。您能否尝试将您的karma.config 特别是webpack 密钥更新为以下内容：

 webpack: {
      resolve: {
        modules: ['node_modules']
      },
      module: {
        rules: [
          {
            test: /\.ts$/,
            loader: 'ts-loader',
          },
        ],
      },
    }

我已将resolve - modules 添加到webpack 键中：

告诉 webpack 在解析模块时应该搜索哪些目录。