无效的配置对象。 Webpack 已使用配置初始化

Question

截至今天早上，使用 Angular CLI 1.0.0-beta.14 我 ng new try3 和 ng serve 并得到以下错误：

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)

我上次 ng new 一个项目是在几天前 -- 那时它工作文件。这是我的环境：

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

Answer 1

将 Angular CLI 升级到 1.0.0-beta.15 或更好：

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

生成工作脚手架：

  ng new try4
  cd try4
  ng serve

如果您有一个使用先前版本的 Angular CLI 构建的现有项目，您将需要升级：

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

并仔细检查每个文件中的每个差异。

根本原因：一旦某个版本的 Angular CLI 正常工作，它当然应该 而不是 停止工作。不幸的是，angular-cli 1.0.0-beta.14 对 webpack: ^2.1.0-beta.22 有 "caret" 依赖性 -- 请注意 ^。昨天，webpack 发布了与 angular-cli 1.0.0-beta.14 不兼容的 2.1.0-beta.23，因此，由于插入符号 (^)，已部署的 angular-cli 1.0.0-beta.14 版本已停止工作。为了解决这个问题，angular-cli 1.0.0-beta.15 昨天发布了 fixed webpack: 2.1.0-beta.22 依赖——注意 缺少 ^——这样就避免了对 webpack 的破坏性升级。有关详细信息，请参阅 https://github.com/angular/angular-cli/issues/2234。

项目解决方法：如果您不能或不愿升级 Angular CLI，您可以解决 caret webpack dependency 通过添加一个 fixed webpack dependency 到你自己的项目。当然，您以后必须保持这种依赖关系：

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

如果无法升级 Angular CLI，请选择此解决方法。

Answer 2

您使用的是 webpack2 测试版吗？

如果是，您现在不能在配置中拥有自定义属性。

您需要通过插件添加自定义属性：

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

Answer 3

我今天刚运行进入这个问题运行一个 ng2.0.0 项目解决方案是降级 webpack。

npm uninstall webpack --save-dev

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

这可能很快就会在 angular-cli 1.0.0-beta.15 生成的 package.json 上得到修复。

此修复应该可以解决任何现有项目的问题。

Answer 4

请检查您的项目是否安装了ts-loader。加载 .ts 文件是必须且应该的。

Answer 5

npm 卸载 webpack --save-dev

其次是

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

那么您应该可以再次gulp。为我解决了这个问题。

Answer 6

还要确保您的 loaders 对象在 module 下面，例如

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

这解决了我的问题

Answer 7

您可以尝试运行这些命令：

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

Answer 8

如果angular-cli没有全局安装npm install angular-cli@latest -g

使用此命令检查 angular-cli 是否已安装 ng --version

这解决了我的问题npm install webpack

无效的配置对象。 Webpack 已使用配置初始化

Invalid configuration object. Webpack has been initialised using a configuration

angular2-cli

angular