'Invalid configuration object. Webpack has been initialised using a configuration

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

angular angular2-cli

Solution 1:^[1]

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 [email protected] --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.

Solution 2:^[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: ...
      }
    })
}

Solution 3:^[3]

npm uninstall webpack --save-dev

followed by

npm install [email protected] --save-dev

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

Solution 4:^[4]

You can try running these commands:

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

Solution 5:^[5]

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

Solution 6:^[6]

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

Solution 7:^[7]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	theRemix
Solution 2	Rohan Kumar
Solution 3	user1089766
Solution 4	Dino
Solution 5	vishpatel73
Solution 6	Nageswara Rao Maridu
Solution 7	KhaledMohamedP

'Invalid configuration object. Webpack has been initialised using a configuration

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]