Angular 6和业力“无法加载“ @ angular-devkit / build-angular”，未注册”

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

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 4

我按照本指南进行了项目的干净迁移，为我解决了同样的问题。

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')