Blog

Angular 8 is finally here! In this post we will look at what’s new in Angular 8.

Angular 8 is a major release for the entire Angular framework, Angular Material and the CLI.

• Ivy renderer to be available as an opt-in preview
• Faster startup time on modern browsers
• New APIs to interact with the CLI

Fortunately, Angular maintains a high degree of stability across major versions. The public API supports features for the next two releases. This means that a feature that is deprecated with Angular 8 will continue to work in the following two major releases (9 and 10).

New Features in Angular 8

Ivy Renderer

There is a huge amount of excitement in the Angular community for the upcoming Ivy renderer. The Angular team has announced that they will be including in Ivy in Angular 8 as an opt-in preview.

As you may already know, Angular apps are a little on the heavy side when it comes to file size and memory usage. Ivy aims to change this and improve the user experience of Angular apps. It is definitely something you should care about!

• Producing smaller application chunks, so it will take browsers less time to download and interpret Angular apps
• Better template type checking at development time to reduce runtime errors
• Greatly reducing rebuild times
• Compiled code is much easier for humans to read and understand
• Broad compatibility with existing Angular apps, so no code change should be necessary.

If this sounds interesting, go ahead and opt into Ivy and let me know your thoughts!

Differential Loading of Modern JavaScript

According to the Angular team, this is one of the most important changes. Differential loading means that the Angular CLI will now generate separate bundles for legacy JavaScript (ES5) and modern JavasScript (ES2015+).

This allows modern browsers to download the smaller, more efficient bundles that load and render faster than before.

Support for Web Workers

A nifty new feature in Angular 8 will that the CLI will support the bundling of web workers.

Web workers are great innovation in front-end development, which make it possible to run CPU intensive tasks in separate a thread. Service workers can even continue to run after the user closes the browser window.

The code that you run in a web worker can’t be in the same file as the application files. It must be in a separate file as it executes in a different thread, outside the Angular zone. The Angular CLI did not work well with bundling of service workers in previous versions.

Deprecated Features

Some features are now deprecated as of Angular 8, including:

• @angular/http and @angular/http/testing packages
• loadChildren string syntax for lazy loaded routes
• @ViewChild() / @ContentChild() resolution
• /deep/, >>> and :ng-deep selectors
• ngModel with reactive forms

How Do I Update My Project from Angular 7 to Angular 8?

You can easily update packages in your project from Angular 7 to Angular 8 with the Angular CLI (command-line interface).

Check and Update CLI Version

Before you start updating to Angular 8, ensure you have the correct cli version on your machine.

ng --version

This command produces the following output:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.3.8
Node: 10.16.0
OS: darwin x64
Angular: 7.2.12

Since I currently have Angular CLI version 7.3.8, I first need to update the cli to version 8.

Start by removing the current cli with the following command:

npm uninstall -g angular-cli

Then install the latest version of angular-cli:

npm install -g @angular/cli@latest

You may be asked to opt-in for anonymous data collection from Google.

Update Angular Packages with ng update

Now that you have the latest cli installed, you are ready to update your packages.

Use the following command to analyse package.json and find out which packages to update:

ng update

Umuts-MBP:angular-material-template umut$ ng update
We analyzed your package.json, there are some packages to update:
    
Name                         Version              Command to update
----------------------------------------------------------------------
@angular/cdk                 7.3.7 -> 8.1.4       ng update @angular/cdk
@angular/cli                 7.3.8 -> 8.3.3       ng update @angular/cli
@angular/core                7.2.12 -> 8.2.5      ng update @angular/core
@angular/material            7.3.7 -> 8.1.4       ng update @angular/material
rxjs                         6.4.0 -> 6.5.3       ng update rxjs 
    
    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

As you can see in the above, the outdated packages are highlighted by the Angular CLI.

All I have to do is run the following command to update the packages:

ng update --all

This command updates all outdated packages to the latest version.

Solving Update Errors

If you get errors during the update, you may need to force the update.

Typescript Version Mismatch

For example, I received the following errors while updating to Angular 8:

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.6", would install "3.6.2")

Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.6", would install "3.6.2")
                  
Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.2")
                  
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.6", would install "3.6.2").
                  
Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.2").

Force the update using the --force flag:

ng update --all --force

Once the command completes, pay attention to any warnings that you get. You must install missing dependencies manually.

I had to install typescript as there was a version mismatch:

npm install typescript@">=3.4 <3.6"

Change Imports in polyfills.js

Module not found: Error: Can't resolve 'core-js/es6/array'
Module not found: Error: Can't resolve 'core-js/es6/date'
...

If you get module not found error, you need to update your import statements in polyfills.js.

This is becausecore-js imports have been changed to allow you to easily import without specifying javascript version.

To solve this, change all imports where you have es6 and es7 and use es.

For example:

From: import 'core-js/es6/symbol';

To: import 'core-js/es/symbol';

Summary

In this post, we looked at new features of Angular 8 and updated a project from Angular 7 to 8. Hopefully you have updated your project Angular 8 without issues.

Let me know in the comments, if you are having issues updating to Angular 8!