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
- Prep your Angular code for AOT.
- Completely separate your AngularJS code from your Angular code.
- 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'
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
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
- Blog Form of this Talk
- UpgradingAngularJS.com (Course 3, Module 10)
- Sample Project for Above
- Rangle's AOT Sandbox (list of AOT gotchas)
- ng-rosetta (example hybrid projects)
- Official Docs on AOT Compiler
Angular Portland March 2018
By Sam Julien
Angular Portland March 2018
Meetup info and slides for my AOT talk.
- 852