This site runs best with JavaScript enabled.
Do you love what we do?Become a patronat Patreon❤️

Upgrade to Angular 8 — Within 10 Minutes

Jeroen O

Video Blogger

"smartphone on laptop computer on top of brown wooden desk” by Alexandru Acea on Unsplash

With this short article, you can upgrade your Angular 7 project to the new Angular 8. You will need to install all Angular dependencies with the@8.0.0 tag. This article is meant to only give you the necessary information without the nonsense, so you upgrade in a short time.

EYou need to install the following dependencies

Angular dependencies

npm install @angular/animations@8.0.0 @angular/common@8.0.0 @angular/compiler@8.0.0 @angular/core@8.0.0 @angular/forms@8.0.0 @angular/platform-browser@8.0.0 @angular/platform-browser-dynamic@8.0.0 @angular/platform-server@8.0.0 @angular/router@8.0.0

Optional:

npm install @angular/cdk@8.0.0 @angular/material@8.0.0

Angular dev dependencies

npm install @angular-devkit/build-angular@latest @angular/compiler-cli@latest @angular/cli@latest @angular/language-service@latest --save-dev

Dependencies; Core-js and Zone.js

npm install core-js@latest zone.js@latest --save

Angular dev dependencies

npm install @angular-devkit/build-angular@8.0.0 @angular/compiler-cli@8.0.0 @angular/cli@8.0.0 @angular/language-service@8.0.0 --save-dev
npm install core-js@3.1.3 zone.js@0.9.1 rxjs@6.5.0
npm install @types/jasmine@latest @types/node@latest codelyzer@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-jasmine@latest karma-jasmine-html-reporter@latest jasmine-core@latest jasmine-spec-reporter@latest protractor@latest tslint@latest webpack@latest rxjs-tslint@latest --save-dev

TypeScript

You should have installed version 3.3+, TypeScript 3.1 and 3.2 are no longer supported.

typescript@3.4.5 --save-dev

Important notes

Lazy loading

There is a new way of lazy loading:

// Before
loadChildren: './path/lazy.module#LazyModule'
// Now
loadChildren: () => import('./path/lazy.module').then(m => m.LazyModule)

Tsconfig and tslint

In your tsconfig.json you should change these compilerOptions:

The `module` value to `esnext`
The `target` value to `es2015`

Various tslint options have updated names, see this commit for the necessary changes.

Polyfills

In your polyfills.ts , the only necessary line you need to have turned on is:

import 'zone.js/dist/zone';

Static query migration

“It’s required that all @ViewChild and @ContentChild queries have a ‘static’ flag specifying whether the query is ‘static’ or ‘dynamic’. The compiler previously sorted queries automatically, but in 8.0 developers are required to explicitly specify which behavior is wanted. This is a temporary requirement as part of a migration”

More details here, example:

// Before
@ViewChild(MatSort) sort: MatSort;
// Now
@ViewChild(MatSort, {static: true}) sort: MatSort;

Optional notes

Material Design

“Instead of importing from @angular/material, you should import deeply from the specific component. E.g. @angular/material/button

Ivy

To experiment with the ivy compiler, add the following in the tsconfig.json :

"angularCompilerOptions": {
"enableIvy": true
}

Angular changelog

The changes and deprecations can be found here.

Do you love what we do?Become a patronat Patreon❤️
Share article

Subscribe to the Mr Frontend weekly newsletter

Every week I will send you a email to help you: stay motivated, learn new things and the best 3 article's on the web