1 of 37

Angular Blast!

Rapid Fire ngUpgrade

2 of 37

3 of 37

Sam Julien

Auth0, Angular GDE

upgradingangularjs.com

4 of 37

Wrangling Dependencies During ngUpgrade

5 of 37

6 of 37

7 of 37

Take Inventory

8 of 37

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

Inventory Steps

9 of 37

Troublemakers

  • Tightly coupled to AngularJS
  • Often UI widgets
  • Cannot be upgraded with ngUpgrade

10 of 37

AngularJS Component to Rewrite

Third Party AngularJS Pagination Directive

11 of 37

Angular Component to Downgrade

Third Party AngularJS Pagination Directive

12 of 37

Angular Component to Downgrade

Third Party AngularJS Pagination Directive

13 of 37

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)

14 of 37

Webpack for ngUpgrade

15 of 37

AOT Do's and Don'ts

Default exports

Private template variables

Arrow functions in useFactory or useValue

Mixing AngularJS & Angular code

​

16 of 37

17 of 37

18 of 37

19 of 37

@ngtools/webpack

(For production builds.)

20 of 37

21 of 37

22 of 37

webpack-merge

(For multiple environments.)

23 of 37

24 of 37

25 of 37

Migrating to RxJS

26 of 37

27 of 37

"First migrate, then get fancy."

28 of 37

Use toPromise

29 of 37

30 of 37

31 of 37

Replace q.all with forkJoin

32 of 37

33 of 37

34 of 37

Caveats!

  • Three musketeers:
    • One delay, all delay
    • One fails, all fail (can be adjusted)

35 of 37

Learn the basics of RxJS outside of Angular

36 of 37

37 of 37

Thank you!

@samjulien

upgradingangularjs.com