Objet de configuration non valide. Webpack a été initialisé en utilisant une configuration

Question

Depuis ce matin, avec Angular CLI 1.0.0-beta.14 I ng new try3 y ng serve et obtenir l'erreur suivante :

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 dernière fois que j'ai ng new un projet était il y a quelques jours - à ce moment-là, le fichier fonctionnait. Voici mon environnement :

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

Answer 1

Mise à niveau d'Angular CLI vers 1.0.0-beta.15 ou mieux :

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

qui génère des échafaudages de travail :

  ng new try4
  cd try4
  ng serve

Si vous avez un projet existant construit avec des versions antérieures d'Angular CLI, vous devrez effectuer une mise à niveau :

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

et examinez attentivement chacune des différences dans chaque fichier.

Cause profonde : Une fois qu'une version d'Angular CLI est fonctionnelle, il faut no arrêter de fonctionner, bien sûr. Malheureusement, angular-cli 1.0.0-beta.14 a un "Dépendance "caret sur webpack: ^2.1.0-beta.22 -- notez le ^ . Hier, webpack libéré 2.1.0-beta.23 qui n'est pas compatible avec angular-cli 1.0.0-beta.14 donc, en raison du caret ( ^ ), les versions déployées de angular-cli 1.0.0-beta.14 ont cessé de fonctionner. Pour résoudre ce problème, angular-cli 1.0.0-beta.15 a été publié hier avec un Correction de webpack: 2.1.0-beta.22 dépendance - notez le l'absence de la ^ -- évitant ainsi la mise à niveau de webpack. Voir https://github.com/angular/angular-cli/issues/2234 pour les détails.

Solution de contournement du projet : Si vous ne pouvez pas, ou ne voulez pas, mettre à jour Angular CLI, vous pouvez contourner l'obstacle de la mise à jour. dépendance de webpack caret en ajoutant un correction de la dépendance de webpack à votre propre projet. Vous devrez maintenir cette dépendance à l'avenir, bien sûr :

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

Choisissez cette solution de contournement si vous ne pouvez pas mettre à niveau Angular CLI.

Answer 2

Je viens de rencontrer ce problème aujourd'hui en exécutant un projet ng2.0.0. la solution a été de downgrader webpack.

npm uninstall webpack --save-dev

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

cela sera probablement corrigé prochainement sur le package.json qui angular-cli 1.0.0-beta.15 génère.

cette correction devrait résoudre le problème sur tous les projets existants.

Answer 3

Utilisez-vous webpack2 beta ?

Si oui, vous ne pouvez pas avoir de propriétés personnalisées dans la configuration maintenant.

vous devez ajouter vos propriétés personnalisées via des plugins :

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

Answer 4

Npm uninstall webpack --save-dev

suivi par

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

Ensuite, vous devriez être en mesure d'avaler à nouveau. Cela a réglé le problème pour moi.

Answer 5

Assurez-vous également que votre loaders L'objet est sous module Par exemple

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

Cela a résolu le problème pour moi