Angular 6 and karma 'Can not load “@angular-devkit/build-angular”, it is not registered'

Question

I had to migrate to the newest angular version. After that, karma tests stopped working and just keep crushing with an error log:

14 04 2018 14:17:00.453:ERROR [preprocess]: Can not load "@angular-devkit/build-angular", it is not registered! Perhaps you are missing some plugin?

...\parkandrest-ui\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma.ts:52 const options = config.buildWebpack.options; ^ TypeError: Cannot read property 'options' of undefined at init (...\parkandrest-ui\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma.ts:52:39) at Array.invoke (...\parkandrest-ui\node_modules\di\lib\injector.js:75:15) at Injector.get (...\parkandrest-ui\node_modules\di\lib\injector.js:48:43) at E:\Workspace\Training\spring-boot-tutorial\parkandrest-ui\node_modules\karma\lib\server.js:166:20 at Array.forEach () at Server._start (...\parkandrest-ui\node_modules\karma\lib\server.js:165:21) at Injector.invoke (...\parkandrest-ui\node_modules\di\lib\injector.js:75:15) at Server.start (...\parkandrest-ui\node_modules\karma\lib\server.js:126:18) at Object.

My karma.conf.js file looks like this:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular-devkit/build-angular']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      config: './angular.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

@angular-devkit\build-angular is of course installed. I appreciate any help.

EDIT: I have a solution which actually combines most of the user answers to my question with my own. Firstly I updated my whole project to stable angular 6 release. Next, I generated empty project like @R.Richards suggested and then I replaced almost every configuration in my old project with the new one. Finally, I have encountered a problem @Suvendu warn me about. I used his solution to resolve it. Unfortunately, I still have one problem with my environment (Intellij IDEA 2017.3.4 Ultimate) which disallows me to start karma tests directly from my IDE ( I've got the same error @Suvendu mentions about), however, it is a topic for the next question.

Answer 1

My solution was a little different, as I had to move the karma.conf.js.

1. Update all dependencies and make sure the app itself works as intented
2. If not done already: Replacing every occurrence of @angular/cli with @angular-devkit/build-angular in the karma.conf.js
3. Removing the files and the preprocessor configs from the karma.conf.js completely. This is all defined in the angular.json and should be handled automatically by the @anguler-devkit karma plugin.

Answer 2

Could not find module "@angular-devkit/build-angular"

here is what worked for my project:

1. npm install -g @angular/cli
2. npm install @angular/cli
3. ng update @angular/cli --migrate-only --from=1.7.0
4. ng update @angular/core
5. npm install rxjs-compat
6. ng serve

I hope this works for you!

Answer 3

I followed this guide to do a clean migration of the project, which solved the same issue for me.

Answer 4

Try installing karma-webpack with npm and then add it to the plugins array -

 plugins: [
  ...
  require('karma-webpack'),
  ...
],

and replace the preprocessors with this -

preprocessors: {
  './src/test.ts': ['webpack']
},

This worked in my case and will also work for the below anticipated future error-

Error: The '@angular-devkit/build-angular/plugins/karma' karma plugin is meant to be used from within Angular CLI and will not work correctly outside of it.

Hope this helps.

Answer 5

The solution for me was that my NODE_ENV environmental variable was set to "production". While trying to upgrade to Angular 6 I did not realize that @angular-devkit/build-angular was listed in my devDependencies, which are not installed in a production environment.

Running "unset NODE_ENV" and removing NODE_ENV from /etc/environment fixed my problem. (Note: Be careful changing this variable in an actual production environment).

Answer 6

In your karma.conf.js add following library, in plugins section. This is done in Angular8.

require('@angular-devkit/build-angular/plugins/karma')