Angular 7 Upgrade: ng update Angular 6 CLI
Upgrade or update Angular 6 to Angular 7 is now easier than ever before, thanks to all the work that has been done in version 6 and the ng update command which allows you tp update specific versions and dependencies.
In this tutorial, you'll learn about the required steps that you need to follow to appropriately migrate your existing apps to Angular 7 — the latest version as of this writing.
Angular 7 is released with many new features for the core framework and the other libraries like Angular Material. The new version depends on the latest version of TypeScript (v3.1) and Node 10. Let's see how we can update the CLI to Angular CLI 7 and upgrade an existing project from using version 6 to Angular 7.
What is ng update?
ng update is a command available from Angular CLI used to update your application and its dependencies. You can use it to update all packages in the
package.json file via the
--all option that could take true and false or specific versions via the
--packages option. You can see all available commands from the official docs.
How to Update/Upgrade to Angular 7
You can find more details about the update process from the update.angular.io official website.
Thanks to all the improvements done in Angular 6, it's now easier than ever to update to the latest version.
In most cases, you can update to v7 by running one simple command:
$ ng update @angular/cli @angular/core
If you still need more details on the process, follow the next sections:
Updating from Angular 6 to Angular 7 (Basic Apps)
if your project is basic, you can simply try the following steps:
- First, you need to remove the deprecated features of RxJS 6 using the auto-update rules from rxjs-tslint. You simply need to install the tool globally using the
npm install -g rxjs-tslintcommand then run the
rxjs-5-to-6-migrate -p src/tsconfig.app.jsonfrom the root of your project. Once it's done you can remove the
- Finally you simply have to run the
ng update @angular/cli @angular/corecommand to update to v7 the core framework and the CLI.
Updating Advanced Apps
If your project uses advanced APIs like HTTP, you need to replace the old
HttpModule and the
Http service (which was deprecated in v6) with the new
HttpClientModule and the
HttpClient service that brings a lot of new powerful features.
Also if your applicaton makes use of the Angular Service worker, you need to migrate any
versionedFiles to the
Aside from what's stated above, you don't need to perform any changes in your project to migrate from v6.1 to v7.
Instructions for Old Angular Versions
Throughout this tutorial guide, you'll learn by example how you can update or migrate your Angular 5 project generated by Angular CLI to use Angular 6 (The latest version) and Angular CLI 6. We'll take you step by step to upgrade your existing Angular 5 projects (can be also applied to Angular 2 or Angular 4) to use the latest Angular features and dependencies.
In nutshell, these are the steps:
- Update your Node.js to version 8 or later required by Angular 6
- Update Http to HttpClient introduced in Angular 4.3+
- Update animations import from @angular/core to @angular/animations
- Update or install the Angular CLI to version 6 globally and locally per project
- Displays packages that need updating using
- Update core packages using
ng update @angular/core
- Update RxJS package using
ng update rxjs
- Update Angular Material, if used, using
ng update @angular/material
Before you can update/upgrade your Angular 5 project, make sure you have the following requirements:
- NodeJS 8+ installed on your machine
- You are using the new Angular 4.3+ HttpClient and HttpClientModule. If that's not the case then don't worry the process is simple and transparent just replace HttpModule with HttpClientModule and use Http with HttpClient
- You are importing animations from @angular/animations instead of @angular/core
Installing or Updating the Angular CLI to Version 6
Updating the Angular CLI is easy and it's a matter of installing the latest version from npm using the following command:
npm install -g @angular/cli
You may need to add sudo depending on your npm configuration.
Also it goes without saying that you need Node.js 8+ and NPM installed on your system to be able to install and run Angular CLI 6.
Updating Angular 5 CLI to Version 6 (Method 2)
You can also uninstall the previous Angular CLI 5 version before you install the latest version using the following command:
npm uninstall -g angular-cli npm cache clean
Next run the
npm install command globally:
npm install -g @angular/cli
Upgrading Angular 4|5 Projects
First, start by installing the Angular CLI 6 locally using the following command (Make sure you are inside your project's root folder):
npm install @angular/cli@latest
Updating Configuration Files
There are many differences between Angular 4|5 and Angular 6 such as
- Angular 6 uses
- Different versions of dependencies in
You can update different configuration files automatically by running the following command from the project's root folder:
ng update @angular/cli
Discovering Packages to Update
Angular CLI has a new utility that allows you to automatcially analyze your project's
package.json file and displays dependencies that need to be updated.
Using you terminal from the root folder of your Angular 5 project run the following command:
This is an example output from this command:
Upgrading Core Packages to Angular 6
Now you need to update the core packages/dependencies to Angular 6. Simply run the following command:
ng update @angular/core
You can update RxJS using the
ng update command:
ng update rxjs
Upgrading Angular 2 Projects
Now how about existing Angular 2 projects, generated using the Angular CLI?
You can easily update them to use latest dependencies by following these instructions:
First check your versions of installed Angular CLI and other dependencies with:
In my case, I'm getting this output:
@angular/cli: 1.0.0 node: 7.9.0 os: linux ia32 @angular/animations: 4.1.2 @angular/common: 4.1.2 @angular/compiler: 4.1.2 @angular/core: 4.1.2 @angular/forms: 4.1.2 @angular/http: 4.1.2 @angular/platform-browser: 4.1.2 @angular/platform-browser-dynamic: 4.1.2 @angular/platform-server: 4.1.2 @angular/router: 4.1.2 @angular/cli: 1.0.0 @angular/compiler-cli: 4.1.2
Since we have installed the latest Angular CLI globally. If you try to serve your project you'll be getting a warning of version mismatch:
Your global Angular CLI version (1.2.5) is greater than your local version (1.0.0). The local Angular CLI version is used. To disable this warning use "ng set --global warnings.versionMismatch=false".
Next open your project
package.json file then change the Angular CLI version: You can check the npm info page for Angular CLI package from this link to find out the latest version.
Next, delete your project
node_modules folder and run the following command:
You don't need to change the versions of the other dependencies, the Angular CLI will take care of fetching latest versions.
Now you can check again for installed versions with:
In my case I'm getting this output:
@angular/cli: 1.2.5 node: 7.9.0 os: linux ia32 @angular/animations: 4.3.1 @angular/common: 4.3.1 @angular/compiler: 4.3.1 @angular/core: 4.3.1 @angular/forms: 4.3.1 @angular/http: 4.3.1 @angular/platform-browser: 4.3.1 @angular/platform-browser-dynamic: 4.3.1 @angular/platform-server: 4.3.1 @angular/router: 4.3.1 @angular/cli: 1.2.5 @angular/compiler-cli: 4.3.1
As you can see Angular 4.3.1 is installed.
In this tutorial, we've seen step by step how to ng update the Angular CLI to version 6, how to upgrade an existing Angular 2 to Angular 4 and An Angular 4|5 to Angular 6.
This tutorial is also updated for Angular 7.
RELATED TUTORIALSAngular Http — Angular 6|7 HttpClient Tutorial
Angular 7|6 Tutorial Course: Securing the UI with Router Guards and UrlTree Parsed Routes (for Login Redirects)
Angular 7|6 Authentication with Firebase (Google | Email & Password): Login, Register, Email Verification and Password Recovery
Building an Angular 6|7 Material Login Form and Modal Dialog UI
Angular 6|7 Material Form & Date Picker Example
Angular 7|6 Tutorial Course: Angular NgModules (Feature and Root Modules)
Angular 7|6 Tutorial Course: Nested Router-Outlet, Child Routes & forChild()