Angular Blast! Rapid Fire ngUpgrade Sam Julien Auth0, Angular GDE - - PowerPoint PPT Presentation

▶
angular blast
SMART_READER_LITE
LIVE PREVIEW

Angular Blast! Rapid Fire ngUpgrade Sam Julien Auth0, Angular GDE - - PowerPoint PPT Presentation

Oct 23, 2022 104 likes •487 views

Angular Blast! Rapid Fire ngUpgrade Sam Julien Auth0, Angular GDE upgradingangularjs.com Wrangling Dependencies During ngUpgrade Take Inventory Inventory Steps 1. Look through package.json (or vendor folder). 2. What is this? 3. Where is

slide-1
SLIDE 1

Angular Blast!

Rapid Fire ngUpgrade

slide-2
SLIDE 2
slide-3
SLIDE 3

Sam Julien

Auth0, Angular GDE upgradingangularjs.com

slide-4
SLIDE 4

Wrangling Dependencies During ngUpgrade

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

Take Inventory

slide-8
SLIDE 8
  • 1. Look through package.json (or vendor folder).
  • 2. What is this?
  • 3. Where is it used?
  • 4. Identify potential troublemakers.

Inventory Steps

slide-9
SLIDE 9

Troublemakers

  • Tightly coupled to AngularJS
  • Often UI widgets
  • Cannot be upgraded with ngUpgrade
slide-10
SLIDE 10

AngularJS Component to Rewrite

Third Party AngularJS Pagination Directive

slide-11
SLIDE 11

Angular Component to Downgrade

Third Party AngularJS Pagination Directive

slide-12
SLIDE 12

Angular Component to Downgrade

Third Party AngularJS Pagination Directive

slide-13
SLIDE 13

Dependency Triage

Determine:

  • Ditch - not used anymore
  • Upgrade - a new version for Angular 2+

(sometimes prefixed with "ngx" or "ng2")

  • Rewrite - no upgrade but can do in house (often

for directives or transclusion)

slide-14
SLIDE 14

Webpack for ngUpgrade

slide-15
SLIDE 15

AOT Do's and Don'ts

Default exports Private template variables Arrow functions in useFactory or useValue

Mixing AngularJS & Angular code

slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

@ngtools/webpack

(For production builds.)

slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

webpack-merge

(For multiple environments.)

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

Migrating to RxJS

slide-26
SLIDE 26
slide-27
SLIDE 27

"First migrate, then get fancy."

slide-28
SLIDE 28

Use toPromise

slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31

Replace q.all with forkJoin

slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34

Caveats!

  • Three musketeers:

○ One delay, all delay ○ One fails, all fail (can be adjusted)

slide-35
SLIDE 35

Learn the basics of RxJS outside of Angular

slide-36
SLIDE 36
slide-37
SLIDE 37

Thank you!

@samjulien upgradingangularjs.com