Angular 8: How to update and features

Introduction to Angular 8:

Angular helps to develop modern applications for web, mobile, or desktop. Currently, Angular 8 is the latest version. The latest version of angular is much faster, lighter, and easier. Updating with the latest version is very important. Updating from angular 7 to angular 8 is very easy.

In this tutorial, you will learn how to update your angular project to the latest version.

Angular 8 uses:

  • Typescript 3.4
  • Node 10 or later

Features:

  • Angular Ivy: Ivy is the angular’s next-generation compilation and rendering pipeline. From angular 8, we can choose to opt-in for using angular ivy, use preview of angular ivy, use @angular/core@next. Update your angular application to 8.1.x rather 8.0.x
  • Differential Loading: In the differential loading process the browser chooses between modern or legacy JavaScript based on its own capabilities. When the application gets loaded, it will automatically load the bundle it needs.
  • Smaller bundle size: With the new update, the build generates a smaller bundle size.

Update Steps:

Step 1: Update Angular CLI

Update your angular CLI by the following command:

npm install -g @angular/cli@latest

Step 2: Update to Angular 8

Update core framework and CLI by the following command:

ng update @angular/cli @angular/core

Step 3: Update Angular-material (Optional):

If you are using angular-material in your application. Then update it to the latest version by the following command:

ng update @angular/material

Step 4: Making changes in your code:

If you use ViewChild and ContentChild, the angular team updated these to resolve these queries and to give more control to developers. ng update command will update your queries automatically. But if any problem occurs, you have to manually make changes in your code.

Ex. @ContentChild(‘foo’, {static: false}) foo !: ElementRef;

**Note: If any problem occurs, refer following links:

ContentChild

ViewChild

Lazy loading of modules, importing string is deprecated. It will be updated automatically by ng update command. Your loadChildren route configuration should be changed like shown below:

previous syntax: loadChildren: ‘./user/user.module#UserModule’

updated syntax: loadChildren: () => import(‘./user/user.module’).then(m => m.UserModule)

To Learn more on loadChildren:

Click here

Resources:

Follow the official angular site from the link below if you encounter any problems with the angular updates.

Angular Updation Guide

For deprecation reference follow the below link:

Angular deprecations

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments