Webpack Angular 4 starting issue - node.js

Question

I am having problem with dependencies in my Angular 4 project. This is the package.json file:
{
"name": "angular-webpack-starter",
"version": "1.0.0",
"description": "A webpack starter for Angular",
"scripts": {
"start": "webpack-dev-server --hot --inline --progress --port 8080 --open",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
},
"dependencies": {
"#angular/animations": "^4.2.5",
"#angular/common": "^4.2.5",
"#angular/compiler": "^4.2.5",
"#angular/compiler-cli": "^4.2.5",
"#angular/core": "^4.2.5",
"#angular/forms": "^4.2.5",
"#angular/http": "^4.2.5",
"#angular/platform-browser": "^4.2.5",
"#angular/platform-browser-dynamic": "^4.2.5",
"#angular/platform-server": "^4.2.5",
"#angular/router": "^4.2.5",
"core-js": "^2.4.1",
"ngx-infinite-scroll": "^0.5.1",
"rxjs": "5.4.1",
"zone.js": "^0.8.12",
"typescript": "^2.4.1"
},
"devDependencies": {
"#angular/cli": "^1.2.0",
"#angular/compiler-cli": "4.2.5",
"#types/core-js": "^0.9.42",
"#types/jasmine": "^2.5.53",
"#types/node": "^8.0.6",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.2.1",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.29.0",
"jasmine": "^2.6.0",
"jasmine-core": "^2.6.4",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^3.0.4",
"karma-webpack": "^2.0.3",
"node-sass": "^4.5.3",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.6",
"script-loader": "^0.7.0",
"style-loader": "^0.18.2",
"to-string-loader": "^1.1.5",
"typescript": "^2.4.1",
"typings": "^2.1.1",
"url-loader": "^0.5.9",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.2.0",
"webpack-merge": "^4.1.0"
}
}
And upon running npm start I get the following error:
> webpack-dev-server --hot --inline --progress --port 8080 --open
C:\...project_folder...\node_modules\extract-text-webpack-plugin\index.js:187
throw new Error("Breaking change: extract now only takes a single argument. Either an options " +
^
Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s).
Example: if your old code looked like this:
ExtractTextPlugin.extract('style-loader', 'css-loader')
You would change it to:
ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
The available options are:
use: string | object | loader[]
fallback: string | object | loader[]
publicPath: string
at Function.ExtractTextPlugin.extract (C:\...project_folder...\node_modules\extract-text-webpack-plugin\index.js:187:9)
at Object.<anonymous> (C:\...project_folder...\config\webpack.common.js:35:30)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\...project_folder...\config\webpack.dev.js:3:20)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-webpack-starter#1.0.0 start: `webpack-dev-server --hot --inline --progress --port 8080 --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-webpack-starter#1.0.0 start script 'webpack-dev-server --hot --inline --progress --port 8080 --open'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --hot --inline --progress --port 8080 --open
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-webpack-starter
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\...project_folder...\npm-debug.log
Does anyone know what seems to be the problem? I have tried changing the versions and deleting node_modules folder and running npm install, but the same thing happens each time.

Answer 1

In yourwebpack.config.jsfile
change
ExtractTextPlugin.extract('style-loader', 'css-loader')
to
ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
As, syntax is changed in latest version.
Hope,it will help!