Part IV – Update Angular-CLI

Lets see, up to now we have created a simple app, added a component and added a service. And I was planning on creating a component to add new tasks but there’s a new release of the Angular-CLi, so lets update it.

Before I could move on to adding the new component I updated my Angular-CLI so I included it here.

Update Angular-CLI

A new release of the Angular-CLI is out since we started so let uninstall the old one globally and re-install it.

Reinstall Globally with NPM

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Now lets update the copy in our developer environment:

Update Dev Environment

npm install --save-dev @angular/cli@latest

Now if I run ng serve I get the following message in my terminal:

Update the angular-cli.json Warning

Environment configuration does not contain "environmentSource" entry.

A new environmentSource entry replaces the previous source entry inside environments.

To migrate angular-cli.json follow the example below:


"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/"


"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/"

So lets update our angular-cli.json. What I did us move line 26 to after line 24 making it the new line 25 and change the source to environmentSource.

Now ng serve works fine 🙂

ng serve in Action

PS D:\quick-look\ng-quick-look> ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: b0278f0cc9b3aaad3693
Time: 13872ms
chunk    {0} polyfills.bundle.js, (polyfills) 153 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, (main) 13 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, (vendor) 2.99 MB [initial] [rendered]
chunk    {4} inline.bundle.js, (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Next we can add a new component to make use of the service we created last time.


Code can be found at Github/BrettMN/quick-look

Update Complete

Did you have any issues updating your project? Let me know by leaving a comment below or emailing