Angular CLI: Cannot read property 'write' of undefined

Question

Following an upgrade of some of Angular packages (from 4 to 5), a colleague encounters the following problem:

Cannot read property 'write' of undefined
TypeError: Cannot read property 'write' of undefined
   at UI.write (C:\Workspace\MyAngularApp\MyAngularApp.Web\node_modules\@angular\cli\ember-cli\lib\ui\index.js:56:23)
   at UI.writeLine (C:\Workspace\MyAngularApp\MyAngularApp.Web\node_modules\@angular\cli\ember-cli\lib\ui\index.js:69:8)
   at Class.run (C:\Workspace\MyAngularApp\MyAngularApp.Web\node_modules\@angular\cli\tasks\serve.js:237:12)
   at check_port_1.checkPort.then.port (C:\Workspace\MyAngularApp\MyAngularApp.Web\node_modules\@angular\cli\commands\serve.js:123:26)
   at <anonymous>
   at process._tickCallback (internal/process/next_tick.js:188:7)

The problem is not understandable since I don't have this problem and the build is also successful in VSTS :(

Here's the package.json (after upgrading from 4.3.6) :

    "dependencies": {
        "@angular-devkit/core": "0.6.8",
        "@angular/animations": "5.2.9",
        "@angular/common": "5.2.9",
        "@angular/compiler": "5.2.9",
        "@angular/core": "5.2.9",
        "@angular/forms": "5.2.9",
        "@angular/http": "5.2.9",
        "@angular/platform-browser": "5.2.9",
        "@angular/platform-browser-dynamic": "5.2.9",
        "@angular/router": "5.2.9",
        "@ngx-translate/core": "8.0.0",
        "@ngx-translate/http-loader": "1.0.2",
        "angular-azure-blob-service": "1.0.0",
        "angular-sortablejs": "2.0.6",
        "angular2-fontawesome": "5.2.1",
        "angular2-multiselect-dropdown": "2.4.0",
        "bootstrap": "4.1.1",
        "copy-webpack-plugin": "4.3.1",
        "core-js": "2.5.0",
        "font-awesome": "4.7.0",
        "jquery": "^3.3.1",
        "lightbox2": "2.10.0",
        "lodash": "4.17.4",
        "moment": "2.20.1",
        "ng2-completer": "1.6.1",
        "ng5-breadcrumb": "0.0.6",
        "ngx-bootstrap": "^3.0.1",
        "ngx-chips": "^1.9.2",
        "popper.js": "^1.14.3",
        "rxjs": "5.5.8",
        "sortablejs": "1.6.0",
        "tether": "^1.4.4",
        "zone.js": "0.8.23"
      },
      "devDependencies": {
        "@angular/cli": "1.7.4",
        "@angular/compiler-cli": "^5.2.9",
        "@types/jasmine": "2.5.54",
    "@types/node": "8.0.25",
    "codelyzer": "4.0.2",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "~2.8.1"
  }

My colleague had installed before @angular/cli 6.0.x in alpha version before trying to install the same version as mine (1.7.4), maybe it's a clue ?

Environment: @angular/cli: 1.7.4 node: 8.9.4 npm: 6.1.0

Answer 1

Found out :D

We had to uninstall globally @angular/cli and then install it again :P

Commands used:

• npm uninstall -g @angular/cli
• npm install npm
• remove package-lock.json (credits: @PierreDuc)
• npm install
• npm install -g @angular/cli
• ng serve

Enjoy :)

Why not Angular to 6 directly? Because there are some breaking changes related to RxJS but yeah, we'll looking forward to update it to Angular6.

And Yes you're right @Ploppy ;) (Use update.angular.io)

Answer 2

I was in the same position as moueidat and managed to get it to work using the angular-cli binary from the node-modules folder:

node.exe .\node_modules\@angular\cli\bin\ng serve