对象，但该对象中存在无效的配置。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

- Jan Nielsen

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，因此由于 caret (^)，部署版本的 angular-cli 1.0.0-beta.14 已经停止工作。为了解决这个问题，昨天发布了 angular-cli 1.0.0-beta.15，其中包含一个已修复的 webpack: 2.1.0-beta.22 依赖项 -- 注意 没有 ^ -- 从而避免了对 webpack 的重大升级。详情请参见 https://github.com/angular/angular-cli/issues/2234。

项目解决方案：如果您不能或不想升级 Angular CLI，您可以通过添加一个 "fixed webpack dependency" 来解决 "caret webpack 依赖项" 的问题。当然，您将需要维护此依赖项：

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

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

- Jan Nielsen

---

由于某种原因，它一直为我安装 1.0.0-beta.14，所以我不得不执行 npm install -g angular/angular-cli（直接从 GitHub 存储库安装）才能获得 1.0.0-beta.15。 - Jason Swett

我按照这个步骤，安装了beta.15版本，然后在我的项目中删除了node_modules等等。但是当我运行ng init时，出现了错误：无法找到模块“@angular/core”。 - Aderbal Nunes

@AderbalNunes -- 请看这个链接：http://stackoverflow.com/questions/39780833/error-cannot-find-module-angular-core - Jan Nielsen

Answer 2

今天我遇到了这个问题，运行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中得到解决。

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

- theRemix

---

Angular CLI 1.0.0-beta.15昨天发布了，以解决这个问题，正如我在我的回答中所提到的。 - Jan Nielsen

Answer 3

您是否正在使用webpack2 beta版本？

如果是的话，现在您无法在配置中添加自定义属性。

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

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

- Taspina

---

angular-cli 1.0.0-beta.15 依赖于 webpack: 2.1.0-beta.22（而 angular-cli 1.0.0-beta.14 依赖于 webpack: ^2.1.0-beta.22）。 - Jan Nielsen

不客气，@Taspina -- 我已经更新了我的答案，并详细说明了它为什么会出错... - Jan Nielsen

plugins 应该是一个数组，而不是对象。 - Georg Grab

Answer 4

删除webpack模块: npm uninstall webpack --save-dev

然后执行以下命令安装webpack@2.1.0-beta.22版本: npm install webpack@2.1.0-beta.22 --save-dev

这样你就可以再次执行gulp了。这个方法解决了我的问题。

- user1089766

Answer 5

您可以尝试运行以下命令：

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

- Chetan Laddha

Answer 6

如果未全局安装angular-cli，请执行以下命令：npm install angular-cli@latest -g 使用以下命令检查是否已安装angular-cli：ng --version 在我的情况下，这个命令可以解决问题：npm install webpack

- vishpatel73

Answer 7

请检查您的项目中是否安装了 ts-loader。它是加载 .ts 文件所必需的。

- Nageswara Rao Maridu

Answer 8

同时确保你的loaders对象在module下面，例如：

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

这对我解决了问题

- KhaledMohamedP