Trying to add karma-webpack to angular karma config

[patrick99e99]

• Operating System: Mac Os X 12.0.1
• Node Version: 14.18.2
• NPM Version: 6.14.15
• webpack Version: 5
• karma-webpack Version: 5

I created an angular project and got a nice angular_karma.config.js file generated...

My real world code does things like:

import I18n from 'i18n-js';

And I wanted to be able to alias that with webpack to a fake/mocked out version of i18n.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['webpack', 'jasmine', '@angular-devkit/build-angular'], // <-- added webpack here
    plugins: [
      require('karma-webpack'), // <-- added karma-webpack here
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/phoenix'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    webpack: { 
      devtool: 'source-map',
      resolve: { alias: 'i18n-js': path_to_mocked_i18n } // <-- added alias
    },
    browsers: [process.env.KARMA_DRIVER || 'ChromeHeadless'],
    singleRun: true,
    restartOnFileChange: true,
  });
};

When I run ng test I get:

Server start failed on port 9876: TypeError: Cannot read property 'outputPath' of undefined

so then I tried adding my test's entry point to the config:

    preprocessors: {
      'spec/javascripts/support/angular_test.ts':  ['webpack', 'sourcemap'], 
    },

And then ng test gives me:

19 01 2022 12:31:39.506:ERROR [karma-server]: Error: Found 1 load error
    at Server.<anonymous> (/Users/patrick/my-app/node_modules/karma/lib/server.js:239:26)
    at Object.onceWrapper (events.js:519:28)
    at Server.emit (events.js:412:35)
    at emitListeningNT (net.js:1365:10)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

[codymikol]

Hello, I recently gained control of this project, is this something you are still struggling with?

[codymikol]

Feel free to reopen if this is still an issue for you, but its been a while so I'm closing