Angular Portland

3/8/18 @ Vacasa (Thank you!)

Wifi!

Network: Vacasa_Guest

6-6:20 Chat and Grab Food

6:20-6:25 Welcome and Sponsors

6:30-6:50 Sam Julien: AOT + ngUpgrade

All speakers and attendees agree to abide by the JSConf Code of Conduct. Be nice to each other - thanks!

Sponsored by Apex Systems (Thank you!)

Organizers: Sam Julien, Richard Stanley, & Jim Klein

7-7:20 Nathan Brenner: TDD

7:30-7:50 Shiva Prasad: NativeScript

Next Meetup: Wednesday 4/11, 6pm, Vacasa

AOT + ngUpgrade

Lessons and Pitfalls

Sam Julien

UpgradingAngularJS.com | Energy Trust of Oregon

@samjulien

No CLI? No problem.

Elephant in the Code

Angular's Two Modes:

  • JIT (just-in-time)
  • AOT (ahead of time)

Three Steps to AOT + ngUpgrade

  1. Prep your Angular code for AOT.
  2. Completely separate your AngularJS code from your Angular code.
  3. Set up Webpack and TypeScript for AOT.

Prep Your Code for AOT

  • Use templateUrl for your Angular components, not inline templates
  • Get rid of private template variables

  • Ditch any instances of 'export default'

  • Excellent resource

Walkthrough

Separate Your Angular and AngularJS Code

  • Move component and service registrations into the AngularJS module
  • Change the AngularJS entry point in Webpack

  • Update your version of Angular

  • Angular Update Guide

Walkthrough

Set Up Webpack & TypeScript for AOT

  • Install the AOT tools
    • @angular/compiler-cli
    • @ngtools/webpack
    • angular2-template-loader
  • Add a new TypeScript config for AOT
  • Adding a new main.ts file for AOT
  • Update the prod config
  • Update dev config

Walkthrough

Rejoice!

More Resources

Angular Portland March 2018

By Sam Julien

Angular Portland March 2018

Meetup info and slides for my AOT talk.

  • 852