Rob Ferguson

How To: ng update

Rob Ferguson -

These are the steps I followed to update my Angular project:

  • I started with a clean commit of a working version
  • I created a new git branch for the update
  • I ran 'ng update'
  • I rebuilt and then tested my app
  • I commited the changes and then merged them into the main branch

I started with a clean commit of a working version

git checkout master
git pull origin master

You can check the branch by running the following command:

git branch

You should see output like:

* master

I created a new git branch for the update

git branch angular-7.2.6
git checkout angular-7.2.6

You should see output like:

Switched to branch 'angular-7.2.6'

I ran 'ng update'

ng update

You should see output like:

We analyzed your package.json, there are some packages to update:

Name                               Version                  Command to update
--------------------------------------------------------------------------------
@angular/cdk                       7.0.2 -> 7.3.3           ng update @angular/cdk
@angular/cli                       7.0.3 -> 7.3.3           ng update @angular/cli
@angular/core                      7.0.1 -> 7.2.6           ng update @angular/core
@angular/material                  7.0.2 -> 7.3.3           ng update @angular/material
rxjs                               6.3.3 -> 6.4.0           ng update rxjs

There might be additional packages that are outdated.
Or run ng update --all to try to update all at the same time.

I ran the following commands:

ng update @angular/cdk --next --force
ng update @angular/cli --next --force
ng update @angular/core --next --force
ng update rxjs --next --force

I rebuilt and tested my app

ng build utils && ng build auth && ng build flowable && ng build serendipity-components && ng build dynamic-forms && ng build sales
ng serve --proxy-config=proxy.conf.json

You should see output like:

Building Angular Package
Building entry point 'utils'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built utils
Built Angular Package!
 - from: /Users/robferguson/workspace/Robinyo/serendipity/projects/utils
 - to:   /Users/robferguson/workspace/Robinyo/serendipity/dist/utils

...

I commited the changes and then merged them into the main branch

Commit the changes:

git add .
git commit -m "ng update @angular/core --next --force 7.0.1 -> 7.2.6"

You should see output like:

[angular-7.2.6 0dc9777] ng update @angular/core --next --force 7.0.1 -> 7.2.6
 2 files changed, 743 insertions(+), 191 deletions(-)

Merge the changes into the main branch:

git checkout master
git pull origin master
git merge angular-7.2.6
git push origin master

You should see output like:

Updating 1b379e6..0dc9777
Fast-forward
 package-lock.json | 904 +++++++++++++++++++++++++++++++++++++++++++-----------
 package.json      |  30 +-
 2 files changed, 743 insertions(+), 191 deletions(-)
Source Code:
References: