Getting to Angular 2
0 likes375 views
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.
![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()](https://image.slidesharecdn.com/ng-europe-161029184128/85/Getting-to-Angular-2-23-320.jpg)
![@NgModule({ imports: [
ChildModule,
RouterModule.forRoot([])
]})
export class AppModule {}
@NgModule({
imports: [RouterModule.forChild(CHILD_ROUTES}]
})
export class ChildModule {}](https://image.slidesharecdn.com/ng-europe-161029184128/85/Getting-to-Angular-2-24-320.jpg)
![@NgModule({ imports: [
ChildModule,
RouterModule.forRoot([
{
path: ‘path1’,
loadChildren: () => ChildModule
}
])
]})
export class AppModule {}
@NgModule({
imports: [RouterModule.forChild(CHILD_ROUTES}]
})
export class ChildModule {}](https://image.slidesharecdn.com/ng-europe-161029184128/85/Getting-to-Angular-2-26-320.jpg)
Getting to Angular 2
- 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
- 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
- 11. Lazy-loading • Built into ng2 router • Automatically loads ng2 modules when needed • Default implementation is systemjs
- 14. ngUpgrade
- 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