Ng test throws an error Cannot find module 'angular-cli/plugins/karma'

Question

Using angular-cli trying to write a test for a service after executing ng test. I get this error:

02 03 2017 14:51:09.486:ERROR [config]: Error in config file!
 { Error: Cannot find module 'angular-cli/plugins/karma'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at module.exports (/Desktop/e2-frontend/karma.conf.js:12:7)
    at Object.parseConfig (/Desktop/e2-frontend/node_modules/karma/lib/config.js:342:5)
    at new Server (/Desktop/e2-frontend/node_modules/karma/lib/server.js:56:20)
    at Promise (/Desktop/e2-frontend/node_modules/@angular/cli/tasks/test.js:34:33)
    at Class.run (/Desktop/e2-frontend/node_modules/@angular/cli/tasks/test.js:15:16)
    at Class.run (/Desktop/e2-frontend/node_modules/@angular/cli/commands/test.js:106:25)
    at Class.<anonymous> (/Desktop/e2-frontend/node_modules/@angular/cli/ember-cli/lib/models/command.js:134:17)
    at process._tickCallback (internal/process/next_tick.js:103:7) code: 'MODULE_NOT_FOUND' }

karma.config.js

    // Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('angular-cli/plugins/karma')
    ],
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'karma-remap-istanbul']
              : ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

It seems like it cannot find karma for some reason. there has to be a different location for it. How can I fix this error?

Take a look at the breaking changes: It's not angular-cli anymore, it should be @angular/cli — Dinistro
– Dinistro, Commented Mar 3, 2017 at 7:12

Robert · Accepted Answer · 2018-04-21 10:25:22Z

40

Replace this line

frameworks: ['jasmine', 'angular-cli'],

with this

frameworks: ['jasmine', '@angular/cli'],

This line

require('angular-cli/plugins/karma')

to this

require('@angular/cli/plugins/karma')

This

preprocessors: {
  ./src/test.ts': ['angular-cli']
},

to this

preprocessors: {
  './src/test.ts': ['@angular/cli']
},

in your karma.config.js file. Hope this will help you.

edited Apr 21, 2018 at 10:25

Robert

6,0032 gold badges35 silver badges34 bronze badges

answered Mar 6, 2017 at 17:49

Harshit

1,56521 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dexter Over a year ago

in one line: inside "karma.config.js" file of your project, change "angular-cli" to @angular/cli for every occurene

Jon Myclo Faustino · Accepted Answer · 2017-12-07 06:42:41Z

First, make sure you install the latest angular CLI (npm install --save-dev @angular/cli:latest) and remove 'angular-cli' in package.json

Second, go to karma.conf.js edit the following:

from frameworks: ['jasmine', 'angular-cli']

to frameworks: ['jasmine', @angular/cli']

from

require('angular-cli/plugins/karma')

to

require('@angular/cli/plugins/karma')

from

preprocessors: {
      './src/test.ts': ['angular-cli']
    },

to

preprocessors: {
      './src/test.ts': ['@angular/cli']
    },

Then, edit your angular-cli.json

from

"environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }

to

"environmentSource": "environments/environments.ts",
      "environments": {
        "dev": "environments/environments.ts",
        "prod": "environments/environments.prod.ts"
      }

kind user · Accepted Answer · 2017-04-11 11:17:57Z

2

Working solution

Open your karma.conf.js file and replace every angular-cli/plugins/karma with:

@angular/cli/plugins/karma

The mentioned properties to replace are inside following keys:

frameworks,
plugins,
preprocessors.

Then, the modified properties should look like:

frameworks: ['jasmine', '@angular/cli'],
plugins: [
   require('karma-jasmine'),
   require('karma-chrome-launcher'),
   require('karma-remap-istanbul'),        
   require('@angular/cli/plugins/karma')
],
preprocessors: {
  './src/test.ts': ['@angular/cli']
}

answered Apr 11, 2017 at 11:17

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

Adam · Accepted Answer · 2017-07-21 14:12:44Z

1

Check your package.json and make sure you don't have a line for "angular-cli". If you do, remove it and run: npm install. This cleared it up for me. There was a reference for this in the dependencies and for "@angular/cli". "@angular/cli" is the new location for the angular cli.

answered Jul 21, 2017 at 14:12

Adam

4792 gold badges9 silver badges31 bronze badges

Comments

Nishan · Accepted Answer · 2024-05-13 17:53:48Z

1

In my case bunch of dev dependencies was missing from package.json on Angular 17. Installed using,

npm install karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter --save-dev

answered May 13, 2024 at 17:53

Nishan

4,5591 gold badge37 silver badges50 bronze badges

Comments

Stefan · Accepted Answer · 2021-04-12 14:57:23Z

0

Try to put "resolveJsonModule": true into the file tsconfig.spec.json by the element compilerOptions. It worked for me.

answered Apr 12, 2021 at 14:57

Stefan

1051 silver badge5 bronze badges

Collectives™ on Stack Overflow

Ng test throws an error Cannot find module 'angular-cli/plugins/karma'

6 Answers 6

1 Comment

Comments

Working solution

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Working solution

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related