Update Angular 7 to Angular 8

Here is the latest release of Angular 8.0.0. This is one of the major release for entire platform, which includes Angular Framework, Angular Material and the CLI. In this blog, we will learn how to update your angular 7 to 8.

Before Update

If you are using HttpModule, then change it to HttpClientModule.
If you are using Http service, then change it to HttpClient Service.
Make sure you are using Node 12 or later. Click below link to update your Node.

Node 12 or Later

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat
If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

Update to Angular 8 version

You can update to angular 8 framework and CLI by using this command.

1

ng update @angular/cli @angular/core

Note: If you need any help regarding ng update command, you can check this link: angular.io

When using new versions of the CLI, you will be asked if you want to opt-in to share your CLI usage data. You can also add your own Google Analytics account. This lets us make better decisions about which CLI features to prioritize, and measure the impact of our improvements. Learn more on angular.io

If you use ViewChild or ContentChild, we’re updating the way we resolve these queries to give developers more control. You must now specify that change detection should run before results are set. Example: @ContentChild('foo', {static: false}) foo !: ElementRef;. ng update will update your queries automatically, but it will err on the side of making your queries static for compatability. Learn more on angular.io.

After Update

For lazy loaded modules via the router, importing via string is deprecated. ng update will take care of this automatically.

In version 8, the string syntax for the loadChildren route specification was deprecated, in favor of new syntax that uses import() syntax.

Before

1
2
3
4
5


const routes: Routes = [{
  path: 'lazy',
  // The following string syntax for loadChildren is deprecated
  loadChildren: './lazy/lazy.module#LazyModule'
}];

After

1
2
3
4
5


const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

Summary

The Angular team is doing a great job — which makes our job (and life) much easier. With every version, the update is smoother and smoother. So the update should be painless and probably won’t take a lot of time.