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
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!
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.
Some features are now deprecated as of Angular 8, including:
loadChildrenstring syntax for lazy loaded routes
ngModelwith 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.
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
npm install -g @angular/[email protected]
You may be asked to opt-in for anonymous data collection from Google.
Update Angular Packages with
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:
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
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 [email protected]">=3.4 <3.6"
Change Imports in
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
This is because
To solve this, change all imports where you have
es7 and use
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!