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?

Answer 1

替换此行

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

使用此

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

这一行

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

到此

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

此

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

到此

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

在karma.config.js文件中。希望这会帮助你。

Answer 2

首先，确保安装最新的角度CLI（npm install --save-dev @ angular / cli：latest）并删除＆＃39; angular-cli＆＃39;在package.json中

第二次，转到 karma.conf.js 编辑以下内容：

<强>从 框架：[＆＃39; jasmine＆＃39;，＆＃39; angular-cli＆＃39;]

以 框架：[＆＃39; jasmine＆＃39;，@ angular / cli＆＃39;]

<强>从

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

到

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

<强>从

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

以

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

然后，编辑你的angular-cli.json

<强>从

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

以

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

Answer 3

工作解决方案

打开 karma.conf.js 文件，将 {every> angular-cli/plugins/karma 替换为：

  

<强> @angular/cli/plugins/karma

要替换的上述属性位于以下键中：

• 框架，

• 插件，

• 的预处理器。

然后，修改后的属性应如下所示：

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']
}

Answer 4

检查你的package.json并确保没有“angular-cli”行。如果这样做，请将其删除并运行：npm install。这为我解决了这个问题。在依赖关系和“@ angular / cli”中有一个参考。 “@ angular / cli”是角度cli的新位置。

Answer 5

尝试通过元素"resolveJsonModule": true将tsconfig.spec.json放入文件compilerOptions中。它对我有用。