首页 文章

Webpack Angular 5 Worker 装载机Karma

提问于
浏览 次
0

我试图用Worker Loader设置一个Angular项目 . 我能够运行应用程序，但在运行业力时失败了！这是我的方法：

  • 使用 ng new webpack-worker-loader-karma - > ng serve 和 ng test 创建项目

  • 已将webpack worker-loader 添加到项目 npm i -D worker-loader

  • 创建的 Worker 打字稿文件 src/app/simple-loader.ts

  • 在 src/typings.d.ts 中创建了工作线类型定义：

declare module 'worker-loader?inline!*' {
  class WebpackWorker extends Worker {
  constructor();
}

export default WebpackWorker;
}
  • 在 src/app/app.component.ts 中添加了实例化工作实例的代码 - > ng serve 返回此错误：
ERROR in ./node_modules/@ngtools/webpack/src!./src/app/simple-worker.ts
Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option nor AotPlugin was detected. You must provide at least one of these.
    at Object.ngcLoader (/[path]/webpack-worker-loader-karma/node_modules/@ngtools/webpack/src/loader.js:617:19)

`

  • 必须在webpack.config.js中设置tsConfigPath . 所以我弹出了项目并更改了配置：
{
    "test": /\.ts$/,
    "loader": "@ngtools/webpack",
    "options": {
      "tsConfigPath": "src/tsconfig.app.json",
    }
}

npm start - >有效！

npm test - >错误：

ERROR in ./node_modules/@ngtools/webpack/src!./src/app/simple-worker.ts
    Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option nor AotPlugin was detected. You must provide at least one of these.
        at Object.ngcLoader (/[path]/webpack-worker-loader-karma/node_modules/@ngtools/webpack/src/loader.js:617:19)

我想我必须为业力设置tsConfigPath . 但不知道如何 . 有任何想法吗？

我在github上发布了这个项目：

https://github.com/kappaj/webpack-worker-loader-karma

angular typescript webpack karma-runner web-worker

1 回答

  • 0

    我在Ionic中有同样的问题（基于Angular） . 我在karma.conf.js中添加了“module”部分

    webpack: { 
  node: { 
    fs: 'empty' 
  },
  module: {
    rules: [
        {
          test: /\.ts$/,
          loader: "@ngtools/webpack",
          options: {
            tsConfigPath: "./src/tsconfig.spec.json",
          }
        },
        { test: /\.css$/, use: 'css-loader' },
        { test: /\.html$/, use: 'html-loader' },
        { test: /\.svg$/, use: 'html-loader' }
    ]
  }
}

    在这之后 npm run test 工作！

    回复于

相关问题