Aliaksei Kuncevič

Angular Expert



http://twitter.com/kuncevic
http://github.com/kuncevic
http://linkedin.com/in/kuncevic

v 1.1 (16/07/2019)

v 1.0 (11/06/2019)

What is new in angular 8 and how to migrate

by Aliaksei Kuncevič

http://twitter.com/kuncevic
http://github.com/kuncevic
http://linkedin.com/in/kuncevic

v 1.1 (16/07/2019)

v 1.0 (11/06/2019)

Angular 8 features

  • Differential loading
  • New Lazy Loading config
  • CLI Builders API
  • Migration Improvements
  • Opt-in Ivy and Bazel
  • New Deprecation Guide

Differential loading

{
    "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es2015",
  }
},
<script type="module" src="…"></script> // Modern JS
<script nomodule src="…"></script> // Legacy JS,

Lazy Loading config

Old


path: '/admin', loadChildren: './admin/admin.module#AdminModule'

new


path: `/admin`, loadChildren: () =>
    import(`./admin/admin.module`).then(m => m.AdminModule)

CLI Builder API

Builders are functions that implement the logic and behaviour for a task.

ng add @angular/fire
ng run my-app:deploy
https://github.com/mgechev/cli-builders-demo
https://angular.io/guide/cli-builder

CLI Builder API

Deploy to GitHub pages directly from the Angular CLI

ng add ngx-gh
ng run project:deploy --deployUrl [URL] --baseHref [HREF]
https://github.com/mgechev/ngx-gh

Migration Improvements

$location => LocationUpgradeModule

https://angular.io/guide/upgrade#using-the-unified-angular-location-service

Experimental Ivy

"angularCompilerOptions": {
  "enableIvy": true
}

Ivy Status


https://is-angular-ivy-ready.firebaseapp.com

Experimental Bazel

npm -g i @angular/bazel
new bzl-app --collection=@angular/bazel
ng add @angular/bazel
ng serve / ng build --prod

Update to Angular 8

Deprecation Guide

https://angular.io/guide/deprecations

Update to Angular 8

https://update.angular.io

Update command

ng update @angular/cli @angular/core
ng update --all --force

Update process

Update output

Fixup typescript

yarn add typescript@3.4.5
npm add typescript@3.4.5

Incompatible Peers

Package "ngx-auth-firebaseui" has an incompatible peer dependency to "firebase" (requires "^5.11.1", would install "6.1.1").

ng build

ng build / ng build --prod

Runtime Issues

Angular Elements

github

Elements at ngconf

https://www.youtube.com/watch?v=tHclHHs7nmo https://www.youtube.com/watch?v=E9i3YBFxSSE

demo

NY

questions ?


@kuncevic