This document discusses strategies for upgrading a large AngularJS (Angular 1) application to Angular 2 while keeping development ongoing. It describes using ngUpgrade to allow Angular 1 and 2 code to coexist, including downgrading Angular 2 components for use in Angular 1 and upgrading Angular 1 components to work in Angular 2. Lazy loading is also suggested to reduce the cost of migration by loading Angular 2 code on demand. Tips are provided for upgrading directives and handling routing events across both frameworks.

1. Getting to Angular 2
Jen Bourey, Google
@jbourey

2. How do we upgrade to Angular 2 without
Putting all development on hold?
Driving developers crazy?

3. Jen Bourey
• Tech Lead for the Google
Cloud Console’s client-side
infrastructure team
• Instigator of angular adoption
for Google Cloud Platform
• Veteran of multiple upgrades

4. Google Cloud Console

7. Project size
• ~450K JS + template source LOC
• Hundreds of reusable shared components and
services
• Dozens of teams across multiple offices, time
zones
• Release 2x / week

8. Angular 2
for Large Apps

9. Performance improvements
@tbosch1009

10. AoT Template Compilation
https://github.com/jeffbcross/closure-compiler-angular-bundling/tree/master/dist

11. Lazy-loading
• Built into ng2 router
• Automatically loads ng2 modules when needed
• Default implementation is systemjs

14. ngUpgrade

15. ngUpgrade
https://angular.io/docs/ts/latest/guide/upgrade.html

16. https://angular.io/docs/ts/latest/guide/upgrade.html

17. Page 1 (ng1)
Component (ng1)
Comp (downgraded ng2)
Service (downgraded ng2)
Service (ng1)
Application (ng1)
Page 2 (ng1)
Component (ng1)
Comp (downgraded ng2)
Service (downgraded ng2)
Service (ng1)

18. Page 1 (ng2)
Component (upgraded ng1)
Component (ng2)
Service (ng2)
Service (upgraded ng1)
Application (ng1)
Page 2 (ng2)
Component (upgraded ng1)
Component (ng2)
Service (ng2)
Service (upgraded ng1)

19. Page 1 (ng1)
Component (ng1)
Component (ng1)
Service (ng1)
Service (ng1)
Application (ng1)
Page 2 (ng2)
Component (ng2)
Component (ng2)
Service (ng1)
Service (ng2)

20. Parallel routing
<div class=“ng-view”>
<ng2-router-root>
(downgraded)
<router-outlet>
ng1 Page ng2 Page

21. Lazy loading

22. • path1 (/path1)
• subpath1 (/path1/subpath1)
• path2 (/path2)
• subpath1 (/path2/subpath1)

23. let ROUTES = [
{
path: ’path1’, component: Page1, children: [
{ path: ‘subpath1’, component: Page2 },
]
},
{
path: ’path2’, component: Page3, children: [
{ path: ‘subpath1’, component: Page4 },
]
},
...
]
@NgModule({imports:
[RouterModule.forRoot(ROUTES)]})
export class AppModule()

24. @NgModule({ imports: [
ChildModule,
RouterModule.forRoot([])
]})
export class AppModule {}
@NgModule({
imports: [RouterModule.forChild(CHILD_ROUTES}]
})
export class ChildModule {}

25. • path1 (/path1)
• subpath1 (/path1/subpath1)
• path2 (/path2)
• subpath2 (/path2/subpath2)

26. @NgModule({ imports: [
ChildModule,
RouterModule.forRoot([
{
path: ‘path1’,
loadChildren: () => ChildModule
}
])
]})
export class AppModule {}
@NgModule({
imports: [RouterModule.forChild(CHILD_ROUTES}]
})
export class ChildModule {}

27. • path1 (/path1)
• subpath1 (/path1/subpath1)
• subpath2 (/path1/subpath2)
• path2 (/path2)

28. Tips

29. ngUpgrade + lazy loading
https://angular.io/docs/ts/latest/guide/upgrade.html

30. Upgrading ng1 directives
$compile

31. Route events
RouteListeningService
doThing()
$routeChangeSuccess
ng-upgraded service
doThing()

32. Route events
RouteListeningService
doThing()
$routeChangeSuccess
ng-upgraded service
doThing()
ng2 route events

33. https://github.com/bourey/ngupgrade-example
@jbourey