angular - Objeto de configuración no válido. Webpack se ha inicializado utilizando una configuración

webpack angular 4

Question

A partir de esta mañana, con Angular CLI 1.0.0-beta.14 I ng new try3 y ng serve y obtendré el siguiente 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)

La última vez que estuve en un proyecto fue hace unos días, en ese punto funcionó el archivo. Aquí está mi entorno:

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

Answer 1

¿Está utilizando webpack2 beta?

Si es así, no puede tener propiedades personalizadas en la configuración ahora.

necesita agregar sus propiedades personalizadas a través de complementos:

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

Answer 2

Acabo de encontrarme con este problema hoy ejecutando un proyecto ng2.0.0, la solución fue degradar el paquete web.

npm uninstall webpack --save-dev

npm install [email protected] --save-dev

esto probablemente se solucionará pronto en el paquete.json que genera angular-cli 1.0.0-beta.15 .

Esta solución debería resolver el problema en cualquier proyecto existente.

Answer 3

Actualice Angular CLI a 1.0.0-beta.15 o superior:

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

que genera andamios de trabajo:

  ng new try4
  cd try4
  ng serve

Si tiene un proyecto existente creado con versiones anteriores de Angular CLI, deberá actualizar:

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

y revise cuidadosamente cada una de las diferencias en cada archivo.

Causa raíz : una vez que una versión de Angular CLI está funcionando, no debe dejar de funcionar, por supuesto. Desafortunadamente, angular-cli 1.0.0-beta.14 tiene una dependencia de "caret" en el webpack: ^2.1.0-beta.22 - note el ^ . Ayer, el webpack lanzó 2.1.0-beta.23 que no es compatible con angular-cli 1.0.0-beta.14 , por lo que, debido a la caret ( ^ ), las versiones desplegadas de angular-cli 1.0.0-beta.14 tienen dejó de funcionar. Para solucionar este problema, angular-cli 1.0.0-beta.15 se lanzó ayer con un webpack: 2.1.0-beta.22 fijo webpack: 2.1.0-beta.22 dependencia - note la falta de ^ - evitando así la actualización de última hora del paquete web. Consulte https://github.com/angular/angular-cli/issues/2234 para obtener más información.

Solución temporal del proyecto : si no puede o no quiere actualizar Angular CLI, puede solucionar la dependencia del paquete web de Caret agregando una dependencia de paquete web fija a su propio proyecto. Tendrás que mantener esta dependencia en el futuro, por supuesto:

  npm install [email protected] --save-dev

Elija esta solución temporal si no puede actualizar Angular CLI.

Answer 4

Compruebe si el ts-loader está instalado en su proyecto. Se debe y debe para cargar los archivos .ts.

Answer 5

También asegúrese de que el objeto de su loaders esté bajo el module por ejemplo

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

Esto solucionó el problema para mí.

Answer 6

npm desinstalar webpack --save-dev

seguido por

npm install [email protected] --save-dev

Entonces deberías poder tragar de nuevo. Arreglado el problema para mí.