Invalid configuration object. Webpack has been initialised using a configuration

Question

As of this morning, with Angular CLI 1.0.0-beta.14 I ng new try3 and ng serve and get the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'tslint'. These properties are valid:
   object { amd?, bail?, cache?, context?, devServer?, devtool?, entry, externals?, loader?, module?, name?, dependencies?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
 - configuration.module has an unknown property 'preLoaders'. These properties are valid:
   object { rules?, loaders?, noParse?, unknownContextRequest?, unknownContextRegExp?, unknownContextRecursive?, unknownContextCritical?, exprContextRequest?, exprContextRegExp?, exprContextRecursive?, exprContextCritical?, wrappedContextRegExp?, wrappedContextRecursive?, wrappedContextCritical? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.node.global should be a boolean.
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { modules?, descriptionFiles?, plugins?, mainFields?, aliasFields?, mainFiles?, extensions?, enforceExtension?, moduleExtensions?, enforceModuleExtension?, alias?, symlinks?, unsafeCache?, cachePredicate?, fileSystem?, resolver? }
 - configuration.resolve.extensions[0] should not be empty.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'tslint'. These properties are valid:
   object { amd?, bail?, cache?, context?, devServer?, devtool?, entry, externals?, loader?, module?, name?, dependencies?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
 - configuration.module has an unknown property 'preLoaders'. These properties are valid:
   object { rules?, loaders?, noParse?, unknownContextRequest?, unknownContextRegExp?, unknownContextRecursive?, unknownContextCritical?, exprContextRequest?, exprContextRegExp?, exprContextRecursive?, exprContextCritical?, wrappedContextRegExp?, wrappedContextRecursive?, wrappedContextCritical? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.node.global should be a boolean.
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { modules?, descriptionFiles?, plugins?, mainFields?, aliasFields?, mainFiles?, extensions?, enforceExtension?, moduleExtensions?, enforceModuleExtension?, alias?, symlinks?, unsafeCache?, cachePredicate?, fileSystem?, resolver? }
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (/home/jan/src/fm-repos/try3/node_modules/webpack/lib/webpack.js:16:9)
    at Class.run (/home/jan/src/fm-repos/try3/node_modules/angular-cli/tasks/serve-webpack.js:23:27)
    at /home/jan/src/fm-repos/try3/node_modules/angular-cli/commands/serve.js:84:26
    at process._tickCallback (internal/process/next_tick.js:103:7)

The last time I ng new a project was a few days ago -- at that point it worked file. Here's my environment:

angular-cli: 1.0.0-beta.14
node: 6.5.0
os: linux x64

Jan Nielsen · Accepted Answer · 2016-10-04T14:30:13.993

Upgrade Angular CLI to 1.0.0-beta.15 or better:

  npm uninstall angular-cli -g
  npm cache clean
  npm install angular-cli@latest -g

which generates working scaffolds:

  ng new try4
  cd try4
  ng serve

If you have an existing project built with prior versions of Angular CLI, you will need to upgrade:

  rm -rf node_modules dist tmp
  npm install angular-cli@latest --save-dev
  ng init

and carefully review each of the differences in each file.

Root cause: Once a version of Angular CLI is working, it should not stop working, of course. Unfortunately, angular-cli 1.0.0-beta.14 has a "caret" dependency on webpack: ^2.1.0-beta.22 -- note the ^. Yesterday, webpack released 2.1.0-beta.23 which is not compatible with angular-cli 1.0.0-beta.14 so, due to the caret (^), deployed versions of angular-cli 1.0.0-beta.14 have stopped working. To address this problem, angular-cli 1.0.0-beta.15 was released yesterday with a fixed webpack: 2.1.0-beta.22 dependency -- note the lack of the ^ -- thus avoiding the breaking upgrade to webpack. See https://github.com/angular/angular-cli/issues/2234 for details.

Project work-around: If you can't, or won't, upgrade Angular CLI, you can work-around the caret webpack dependency by adding a fixed webpack dependency to your own project. You'll have to maintain this dependency going forward, of course:

  npm install webpack@2.1.0-beta.22 --save-dev

Choose this work-around if you can't upgrade Angular CLI.

For whatever reason it kept installing `1.0.0-beta.14` for me and I had to do `npm install -g angular/angular-cli` (install directly from GitHub repo) in order to get `1.0.0-beta.15`. — Jason Swett, Sep 25 '16 at 23:40
I follow this, install version beta.15, rm node_modules on my project, etc etc `ng init` get: Cannot find module '@angular/core' — Aderbal Nunes, Oct 04 '16 at 14:24
@AderbalNunes -- see this: http://stackoverflow.com/questions/39780833/error-cannot-find-module-angular-core — Jan Nielsen, Oct 04 '16 at 14:26

score 19 · Answer 2 · answered Sep 21 '16 at 05:24

19

I just ran into this issue today running an ng2.0.0 project the solution was to downgrade webpack.

npm uninstall webpack --save-dev

npm install webpack@2.1.0-beta.22 --save-dev

this will probably be fixed soon on the package.json that angular-cli 1.0.0-beta.15 generates.

this fix should resolve the issue on any existing projects.

answered Sep 21 '16 at 05:24

theRemix

2,154
16
16

Angular CLI `1.0.0-beta.15` was released yesterday to address this, as I noted in my answer. – Jan Nielsen Sep 21 '16 at 14:45

score 2 · Answer 3 · edited Jan 12 '17 at 11:09

2

Are you using webpack2 beta?

If yes you can't have custom properties in configuration now.

you need to add your custom properties via plugins:

plugins: {
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: ...
      }
    })
}

edited Jan 12 '17 at 11:09

Rohan Kumar

40,431
11
76
106

answered Sep 20 '16 at 19:44

Taspina

131
1
5

`angular-cli 1.0.0-beta.15` has a dependency on `webpack: 2.1.0-beta.22` (whereas `angular-cli 1.0.0-beta.14` has a dependency on `webpack: ^2.1.0-beta.22`). – Jan Nielsen Sep 20 '16 at 19:52
You're welcome, @Taspina -- I've updated my answer with the details of **why** it broke... – Jan Nielsen Sep 20 '16 at 20:10
`plugins` should be an array, not object. – Georg Grab Mar 03 '17 at 15:48

score 1 · Answer 4 · answered Feb 05 '17 at 07:23

1

npm uninstall webpack --save-dev

followed by

npm install webpack@2.1.0-beta.22 --save-dev

Then you should be able to gulp again. Fixed the issue for me.

answered Feb 05 '17 at 07:23

user1089766

597
6
14

score 0 · Answer 5 · edited Oct 10 '19 at 12:34

0

You can try running these commands:

npm uninstall angular-cli -g
npm cache clean
npm install webpack // Move webpack to latest

edited Oct 10 '19 at 12:34

Dino

7,779
12
46
85

answered Oct 10 '19 at 11:57

Chetan Laddha

993
8
22

score 0 · Answer 6 · answered May 24 '22 at 03:47

0

If angular-cli is not installed globally npm install angular-cli@latest -g

Check angular-cli is installed or not using this command ng --version

This fixes the issue in my case npm install webpack

answered May 24 '22 at 03:47

vishpatel73

317
4
10

score -1 · Answer 7 · answered Jan 11 '17 at 16:25

-1

Please check whether the ts-loader is installed in your project. It is must and should for loading the .ts files.

answered Jan 11 '17 at 16:25

Nageswara Rao Maridu

157
1
8

score -1 · Answer 8 · answered Feb 22 '17 at 15:44

-1

Also make sure your loaders object is under module e.g

  module: {
    loaders: [{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}]
  }

This solved the issue for me

answered Feb 22 '17 at 15:44

KhaledMohamedP

5,000
3
28
26

Invalid configuration object. Webpack has been initialised using a configuration

8 Answers8

Linked