CODEWITHSUNDEEP
node.jsangularwebpackwebpack-dev-server
Norgul
Norgul

Reputation: 4783

Webpack Angular 4 starting issue

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! [email protected] start: `webpack-dev-server --hot --inline --progress --port 8080 --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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.

Upvotes: 2

Views: 534

Answers (1)

Darshita
Darshita

Reputation: 746

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!

Upvotes: 2

Related Questions