CODEWITHSUNDEEP
angularangular-cli
Stevie Star
Stevie Star

Reputation: 2371

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

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?

Upvotes: 3

Views: 1359

Answers (2)

Gabriel Amazonas Mesquita
Gabriel Amazonas Mesquita

Reputation: 953

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

Upvotes: 1

Stevie Star
Stevie Star

Reputation: 2371

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.

Upvotes: 1

Related Questions