Search code examples
node.jswebpack-2angulartypescript2.2

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema 2 in Angular V4.0.0

I have updated the webpack package to latest version 2.3.2 and i am using Angular V4.0.0, typescript V2.2.2. While runing 'npm run build' command throwing the following error. And it worked fine for angular2 after updating it is throwing the error

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'htmlLoader'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           htmlLoader: ...
         }
       })
     ]
Solution

  • You should move the html loader

     htmlLoader: {
        minimize: false
    },


plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      htmlLoader: {
       minimize: true
      }
    }
  })
]

    Check out this link

    In webpack 2.0 they have stopped support directly loading custom loader.