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!