Webpack + Angular 5 + Worker Loader + Karma

Question

Im trying to setup an Angular project with Worker Loader. I am able to run the app but failed at running karma! Here is my approach:

Created project with ng new webpack-worker-loader-karma -> ng serve and ng test works
Added webpack worker-loader to project npm i -D worker-loader
Created worker typescript file src/app/simple-loader.ts

Created worker type definitions in src/typings.d.ts:

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

export default WebpackWorker;
}

Added code for instantiation of worker in src/app/app.component.ts -> ng serve returns this error:

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)

`

Had to set the tsConfigPath in webpack.config.js. So I ejected the project and changed the config:

{
    "test": /\.ts$/,
    "loader": "@ngtools/webpack",
    "options": {
      "tsConfigPath": "src/tsconfig.app.json",
    }
}

npm start -> works!

npm test -> error:

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)

I think I have to set the tsConfigPath for karma. But don't know how. Any ideas?

I published the project on github:

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

Priladnykh Ivan Priladnykh Ivan · Accepted Answer · 2018-04-05T12:34:01

I have same problem in Ionic (based on Angular). I added "module" section to karma.conf.js

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' }
    ]
  }
}

After this npm run test works!

Webpack + Angular 5 + Worker Loader + Karma

1 Answers