Upgrade to Angular 8 in 5 minutes

Clint Pitzak

3 min readJun 18, 2019

Quickly upgrade to Angular 8 from Angular 7 by following this guide.

Before you Update

Only if this applies to you. If you aren’t doing this in your code then skip this part.

If you use HttpModule and the Http service then you’ll need to change your code to use HttpClientModule and HttpClient service. More info at angular.io
After you and your dependencies are updated to RxJS 6, remove rxjs-compat
If you are using Angular Service works then you’ll need to migrate versionedFiles to the files array
Instead of using matRippleSpeedFactor and baseSpeedFactor for ripples, use Animation config

Performing the Angular 8 Update

Check your version of Node

You’ll need Node 10 or later

$ node -v
10.0.0

Update the Angular core framework and CLI

Upgrade the core framework and CLI to version 8 by running the following in your Angular projects directory:

ng update @angular/cli @angular/core

Handling Errors During Core Framework and CLI Upgrade

Here are some common errors that could occur during the upgrade

Uncommitted Changes

Repository is not clean. Please commit or stash any changes before updating.

You should commit or stash your changes so you don’t risk loosing your work in the event of an upgrade failure. If you are sure you are okay with the risk then you can add this flag:

--allow-dirty

To perform the update with that flag the command would be:

ng update @angular/cli @angular/core --allow-dirty

Template Migration Strategy Fails

The template migration strategy uses the Angular compiler internally and therefore projects that no longer build successfully after the update cannot use the template migration strategy. Please ensure there are no AOT compilation errors.
 
 Could not setup migration strategy for “src/tsconfig.app.json”. The following error has been reported:Error: <the error message specific to your problem>

If this error occurs you’ll get a error message with the reason the template migration strategy failed. The error message should say that there is something wrong with your project. After you fix it you can rerun the template migration strategy with this command:

ng update @angular/core --from 7 --to 8 --migrate-only

At this point you might see this message:

Repository is not clean. Please commit or stash any changes before updating.

If that’s the case then it’s best to commit your changes to make sure you don’t risk loosing them during the upgrade. If you are okay with the risk then you can bypass this by using this command:

ng update @angular/core --from 7 --to 8 --migrate-only --allow-dirty

Upgrade Angular Material (If you’re using it)

You can upgrade angular material by running this command

ng update @angular/material

Update Styles

Replace /deep/ with ::ng-deep in your styles. Read more about ::ng-deep here

Know TypeScript 3.4

Angular 8 now uses TypeScript 3.4

Angular CLI Now Builds with Differential Loading

If you want to opt out of this you can change your target back to es5 in your tsconfig.json. More information about here

ViewChild and ContentChild Changes

If you are using either ViewChild or ContentChild then you’ll need to be concerned with how those queries are resolved now. ng update will update your queries automatically but it’s not perfect. Read more here

Lazy Loaded Modules Via Router

Importing via string is deprecated. When you ran ng update above it changed this for you. More information here about using import statements instead of strings for lazy loading.