Universal Tutorial Logo Universal TutorialUniversal Tutorial Logo Universal Tutorial

How to upgrade to Angular 8

How to upgrade to Angular

In this tutorial you will learn about upgrading to Angular 8

Below are some of major changes introduced in Angular 8

  • Bundle size is reduced to ~10% , as it's very important browsers on client side always loads these bundles to display the content
  • Now Angular 8 supports dynamic imports
  • Supports Webworkers and through CLI you can generate using the command ng generate webWorker my-worker





Step 1 : Before upgrading make sure you have all the HTTP modules are imported from HttpClientModule instead of HttpModule and Http and make sure RxJS is 6 or above



Step 2 : Now from Angular CLI run below commands

ng update @angular/cli @angular/core


Step 3 : If you have used /deep/ in the styles ,replace with ::ng-deep



Step 4: Update Typescript to 3.4 and Node.js to 10 or above



Step 5 : If you have used ViewChild or ContentChild now you need to define either static:true or static:false when you set true results will always be available in ngOnInit and when you set false the results are available in ngAfterViewInit

@ViewChild('foo', { static: true }) foo: ElementRef;
@ViewChild('foo', { static: false }) foo: ElementRef;


Step 6 : If you have used Angular Material ,execute the below command as now Angular and Angular Material should be in sync

ng update @angular/material


Step 7 : From Angular 8 Sass compiler uses Javascript compiler hence add the node-sass as dev dependency using below

npm install node-sass --save-dev


While upgrading ,If you face any problem such as An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-server ,execute the below commands, But before that please make sure to commit to your existing changes as ng update will try to update all the angular dependent packages ,so in case of any problem you can easily revert the change
npm uninstall @angular-devkit/build-angular 
npm install @angular-devkit/build-angular 
ng update --all




You may also like

Free REST APIs for Country,State,City Free REST APIs for Country,State,City
Angular Cascade Dropdowns Angular Cascade Dropdowns


How to Upgrade to Angular 9 How to Upgrade to Angular 9
What's new in Angular 9 What's new in Angular 9
Angular 9 Performance Results Angular 9 Performance Results
Debug Node.js Applications Debug Node.js Applications
Upgrade to Angular 8 Upgrade to Angular 8
Fossil Genwatch 5 Fossil Genwatch 5
Samsung Galaxy Active 2 Samsung Galaxy Active 2
Best Smartwatches in 2019 Best Smartwatches in 2019

Share this page


Comments

User
Universal Tutorial

If you have any doubts, please go through the video

Jan 18, 2020, 11:17:34 AM