Angular 2 CLI Upgraded to latest and now ng serve gives me errors

Question

I upgraded to 1.0.0-beta.11-webpack.8 in my current Angular 2 CLI project, as well as updating my angular-cli.json to match the expected properties of the upgraded CLI. When I run ng serve, I get this error:

`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)`

I wrestled with this for awhile, but after running all of these commands and getting Angular CLI to not be in a broken state, I'm running into this issue. Here are the commands I ran:

`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`

And finally, here are the versions of node, npm, and Angular CLI that I'm running:

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

And here is my 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": "+"
  }
}`

I apologize for the huuuuge wall of text, but I wanted to make sure you all had everything you needed to potentially help with this. What am I doing wrong here?

Answer 1

I managed to get this to work. Try pasting this into your angular-cli.json (edit it accordingly):

{
  "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": "+"
  }
}

Then type ng init inside of root project directory. It'll ask you to replace a bunch of different files or keep them. There are some slight differences between files, particularly inside of app.module.ts so make sure you commit first, as there will be some changes in file structure and code inside of the files.

Answer 2

Try updating your nodejs version to the latest (currently v.7.2). It worked for me with ng serve failing