Angular 2 CLI升级到最新版本后，现在使用ng serve命令出现错误。

Question

我在我的当前Angular 2 CLI项目中升级到1.0.0-beta.11-webpack.8，并更新了我的angular-cli.json以匹配升级后的CLI的预期属性。当我运行ng serve时，出现以下错误：

`Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at Object.getWebpackCommonConfig (/Applications/MAMP/htdocs/learnloop/node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts:23:25)
    at new NgCliWebpackConfig (/Applications/MAMP/htdocs/learnloop/node_modules/angular-cli/addon/ng2/models/webpack-config.ts:13:30)
    at Class.exports.default.Task.extend.run (/Applications/MAMP/htdocs/learnloop/node_modules/angular-cli/addon/ng2/tasks/serve-webpack.ts:19:22)
    at /Applications/MAMP/htdocs/learnloop/node_modules/angular-cli/addon/ng2/commands/serve.ts:84:26
    at process._tickCallback (internal/process/next_tick.js:103:7)`

我为此苦苦挣扎了一段时间，但在运行了所有这些命令并使Angular CLI不再处于破碎状态后，我遇到了这个问题。以下是我运行的命令：

`npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@webpack
rm -rf node_modules dist tmp typings
npm install --save-dev angular-cli@webpack`

最后，这里是我正在使用的node、npm和Angular CLI版本：

Node v6.4.0 NPM 3.10.3 angular-cli: 1.0.0-beta.11-webpack.8

以下是我的angular-cli.json文件：

`{
  "project": {
    "version": "1.0.0-beta.11-webpack.8",
    "name": "learnloop"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "prefix": "app",
      "root": "src",
      "styles": [
        "styles.scss"
      ]
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}`

非常抱歉出现了大段的文字，但我想确保您们都拥有潜在帮助所需的所有信息。这里我做错了什么？

- Stevie Star

---

在更新到最新版本的angular-cli之后，我也遇到了同样的问题。 - st_clair_clarke

Answer 1

尝试将您的nodejs版本更新到最新版本（目前为v.7.2）。这对我解决了ng serve失败的问题。

- Gabriel Amazonas Mesquita

Answer 2

我成功让这个工作了。试着将以下内容粘贴到你的angular-cli.json文件中（根据需要进行编辑）：

{
  "project": {
    "version": "1.0.0-beta.11-webpack.8",
    "name": "<name-of-app>"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

然后在根项目目录中键入ng init。它会要求您替换一堆不同的文件或保留它们。文件之间存在一些细微的差异，特别是在app.module.ts内部，因此请确保首先进行提交，因为文件结构和文件内的代码将发生一些更改。

- Stevie Star

---

@Steve Star，该文件与当前版本的angular-cli生成的文件完全相同，但仍可在控制台输出。 - st_clair_clarke