Angular 2 npm test - Can not load "webpack"

Question

I'm seeing an error when I try to run npm test

08 09 2017 16:50:50.240:ERROR [preprocess]: Can not load "webpack"!
  TypeError: Cannot read property 'plugin' of undefined
    at PathsPlugin.apply (/Users/m/Sites/budget-angular2/node_modules/@ngtools/webpack/src/paths-plugin.js:75:18)
    at Resolver.apply (/Users/m/Sites/budget-angular2/node_modules/tapable/lib/Tapable.js:375:16)
    at /Users/m/Sites/budget-angular2/node_modules/enhanced-resolve/lib/ResolverFactory.js:249:12
    at Array.forEach (native)
    at Object.exports.createResolver (/Users/m/Sites/budget-angular2/node_modules/enhanced-resolve/lib/ResolverFactory.js:248:10)
    at WebpackOptionsApply.process (/Users/m/Sites/budget-angular2/node_modules/webpack/lib/WebpackOptionsApply.js:282:46)
    at webpack (/Users/m/Sites/budget-angular2/node_modules/webpack/lib/webpack.js:36:48)
    at new Plugin (/Users/m/Sites/budget-angular2/node_modules/karma-webpack/lib/karma-webpack.js:63:18)
    at invoke (/Users/m/Sites/budget-angular2/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/Users/m/Sites/budget-angular2/node_modules/di/lib/injector.js:59:20)
    at get (/Users/m/Sites/budget-angular2/node_modules/di/lib/injector.js:48:43)
    at /Users/m/Sites/budget-angular2/node_modules/di/lib/injector.js:71:14
    at Array.map (native)
    at Array.invoke (/Users/m/Sites/budget-angular2/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/m/Sites/budget-angular2/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/m/Sites/budget-angular2/node_modules/karma/lib/preprocessor.js:55:20)
    at /Users/m/Sites/budget-angular2/node_modules/karma/lib/preprocessor.js:106:17
    at Array.forEach (native)
    at /Users/m/Sites/budget-angular2/node_modules/karma/lib/preprocessor.js:103:27
    at module.exports (/Users/m/Sites/budget-angular2/node_modules/karma/node_modules/isbinaryfile/index.js:28:12)
    at /Users/m/Sites/budget-angular2/node_modules/karma/lib/preprocessor.js:84:7
    at /Users/m/Sites/budget-angular2/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:446:3)
08 09 2017 16:50:50.257:WARN [karma]: No captured browser, open http://localhost:9876/
08 09 2017 16:50:50.264:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
08 09 2017 16:50:50.264:INFO [launcher]: Launching browser Chrome with unlimited concurrency
08 09 2017 16:50:50.265:ERROR [karma]: Found 1 load error

I have the following in my package.json file:

"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"karma-webpack": "^2.0.4",

I have seen a few posts re karma-webpack versions but the ones recommended seem older that I have here. I did have to manually npm install karma-webpack --save-dev as it was missing from the quickstart, but it should be available now, right?

Answer 1

karma-webpack has a peer dependency of webpack. I don't see webpack in your package.json that you listed (unless that's not the full list). You need to also install webpack:

npm install --save-dev webpack

Answer 2

You need to upgrade to the newer version of angular CLI. You can delete the project folder which you already created using ng new my-app

Uninstall the older angular-cli

npm uninstall angular-cli -g

Install the new @angular-cli

npm install @angular/cli -g

Start a new project again

ng new my-app

Then, run the test

ng test

Answer 3

I found this solution

add these in your package.json in dependencies

{

"karma-sourcemap-loader": "^0.3.7",

 "karma-webpack": "^2.0.3",

}

and then npm i and then-: npm run test