时间戳

首页 > 解决方案 > 阅读打字稿时，Karma 抛出“模块解析失败”

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

问题描述

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

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

在此处输入图像描述

这是我的因果报应：

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，因为我找不到解决方法。

标签： angularwebpackkarma-jasminekarma-webpacksingle-spa

解决方案

从您的错误来看，您的问题肯定与 ts 文件有关，因为它指出“错误./src/test.ts”

请更新到版本 9，因为ts-loaderts-loader的 github兼容性文档指出：

打字稿：3.6.3+

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

节点：12.x+

进一步的研究还指出：

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

根据webpack 文档，该文档指出：

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在 5 年前发布的。

从查看webpack 集成文档，特别是使用karma它的集成说您可以在其中添加 webpack 配置karma.config。所以它让我相信它可能很难阅读你的webpack.config. 您能否尝试将您的karma.config具体webpack密钥更新为以下内容：


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

我已将resolve - 模块添加到webpack键中，因为它：

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

推荐阅读