Angular Router - Let's get lazy

Routing in web applications is an essential concept that enables users to navigate throughout them. Angular Router is simple yet powerful for developers to use in their applications.

In this talk we will learn mechanics of Angular Router with lazy loading and pre-loading features.

Transcript

1. Angular Router Let’s get lazy
2. Hello World Bartosz Pietrucha Full-stack software engineer Java and JavaScript Founder at angular-academy.com Twitter @pietrucha 2
3. Angular Router - Let’s get lazy (loading) 3 • Angular Router • Lazy loading • Preloading • Router Guards @pietrucha
4. Angular Router - Let’s get lazy (loading) 4 • Angular Router • Lazy loading • Preloading • Router Guards @pietrucha
5. Angular Router 5 http://application.com/employees/ Employees list http://application.com/employees/1 Employee details Employee Employee Employee @pietrucha
6. Angular Router 6 http://application.com/employees/1 Router configuration Root component Employees container Employees List Employee Details Home component Admin component Router State @pietrucha
7. Angular Router 7 http://application.com/admin Router configuration Root component Employees container Employees List Employee Details Home component Admin component Router State @pietrucha
8. Angular Router 8 Root component Employees container Home component const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', component: EmployeeContainerComponent, }, { path: 'employees/:id', component: EmployeeContainerComponent }, { path: 'admin', component: AdminComponent, } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } Admin component @pietrucha
9. Angular Router 9 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', component: EmployeeContainerComponent, }, { path: 'employees/:id', component: EmployeeContainerComponent }, { path: 'admin', component: AdminComponent, } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } Root component Employees container Home component Admin component @pietrucha
10. Angular Router 10 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', component: EmployeeContainerComponent, }, { path: 'employees/:id', component: EmployeeContainerComponent }, { path: 'admin', component: AdminComponent, } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } Root component Employees container Home component Admin component http://application.com/employees/1 @pietrucha
11. Angular Router 11 Root component Employees container Home component const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', component: EmployeeContainerComponent, }, { path: 'employees/:id', component: EmployeeContainerComponent }, { path: 'admin', component: AdminComponent, } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } Admin component @pietrucha
12. Angular Router 12 <md-toolbar color="primary"> <a [routerLink]="['/']">HR System</a> </md-toolbar> <router-outlet></router-outlet> app.component.html @pietrucha
13. Angular Router 13 constructor(private router: Router) { } this.router.navigate(['/employees/', id]); <button class="button" [routerLink]="['/admin']">Admin</button> @pietrucha
14. Angular Router 14 npm install webpack-bundle-analyzer ng build --stats-json webpack-bundle-analyzer ↪dist/stats.json
15. Angular Router - Let’s get lazy (loading) 15 • Angular Router • Lazy loading • Preloading • Router Guards @pietrucha
16. Lazy loading 16 • main.bundle.js • 0.chunk.js (employee module) • 1.chunk.js (admin module)
17. Lazy loading 17 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', loadChildren: 'app/employee/employee.module#EmployeeModule', }, { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } const routes: Routes = [ { path: '', component: EmployeeContainerComponent, }, { path: ':id', component: EmployeeContainerComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class EmployeeRoutingModule { } const routes: Routes = [ { path: '', component: AdminComponent, canActivate: [AuthService] } ]; @NgModule({ imports: [ RouterModule.forChild(routes) ] }) export class AdminModule { } Routing for root Routing for employee module Routing for admin module
18. Lazy loading 18 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', loadChildren: 'app/employee/employee.module#EmployeeModule', }, { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } const routes: Routes = [ { path: '', component: EmployeeContainerComponent, }, { path: ':id', component: EmployeeContainerComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class EmployeeRoutingModule { } const routes: Routes = [ { path: '', component: AdminComponent, canActivate: [AuthService] } ]; @NgModule({ imports: [ RouterModule.forChild(routes) ] }) export class AdminModule { } Routing for root Routing for employee module Routing for admin module
19. Lazy loading 19 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', loadChildren: 'app/employee/employee.module#EmployeeModule', }, { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } const routes: Routes = [ { path: '', component: EmployeeContainerComponent, }, { path: ':id', component: EmployeeContainerComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class EmployeeRoutingModule { } const routes: Routes = [ { path: '', component: AdminComponent, canActivate: [AuthService] } ]; @NgModule({ imports: [ RouterModule.forChild(routes) ] }) export class AdminModule { } Routing for root Routing for employee module Routing for admin module
20. Lazy loading 20 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', loadChildren: 'app/employee/employee.module#EmployeeModule', }, { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } const routes: Routes = [ { path: '', component: EmployeeContainerComponent, }, { path: ':id', component: EmployeeContainerComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class EmployeeRoutingModule { } const routes: Routes = [ { path: '', component: AdminComponent, canActivate: [AuthService] } ]; @NgModule({ imports: [ RouterModule.forChild(routes) ] }) export class AdminModule { } Routing for root Routing for employee module Routing for admin module
21. Lazy loading 21 @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, AppRoutingModule, HomeModule, // EmployeeModule, // AdminModule, SharedModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Remove lazy loaded modules from imports in root module! @pietrucha
22. Lazy loading 22 Bundling? Out of the box with Angular CLI! Angular CLI ships with webpack plugin which traverses routing configuration to create bundles matching that configuration @pietrucha
23. Angular Router - Let’s get lazy (loading) 23 • Angular Router • Lazy loading • Preloading • Router Guards @pietrucha
24. Preloading 24 main.bundle.js 1. Fetch initial bundle http://application.com/
25. main.bundle.js Preloading 25 main.bundle.js 1. Fetch initial bundle 2. Bootstrap application http://application.com/ http://application.com/ Home component
26. main.bundle.js Preloading 26 main.bundle.js 0.chunk.js 1. Fetch initial bundle 2. Bootstrap application 3. Fetch additional chunks in the background http://application.com/ http://application.com/ Home component http://application.com/ Home component
27. 0.chunk.js main.bundle.js Preloading 27 main.bundle.js http://application.com/ http://application.com/ Home component http://application.com/ Home component 0.chunk.js http://application.com/employees Employees cmp 1. Fetch initial bundle 2. Bootstrap application 3. Fetch additional chunks in the background 4. Wait for user enter new route and render immediately
28. Preloading 28 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', loadChildren: 'app/employee/employee.module#EmployeeModule', data: { preload: true } } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })], exports: [RouterModule] }) export class AppRoutingModule { } @pietrucha
29. Preloading 29 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'employees', loadChildren: 'app/employee/employee.module#EmployeeModule', data: { preload: true } } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })], exports: [RouterModule] }) export class AppRoutingModule { } @pietrucha
30. Preloading 30 @Injectable() export class SelectivePreloadingStrategy implements PreloadingStrategy { constructor() { } preload(route: Route, load: () => Observable<any>): Observable<any> { if (route.data && route.data['preload']) { console.log('Preloaded: ' + route.path); return load(); } else { return Observable.of(null); } } } @pietrucha
31. Angular Router - Let’s get lazy (loading) 31 • Angular Router • Lazy loading • Preloading • Router Guards @pietrucha
32. Router Guards 32 Home component Admin component CanActivate Guard @pietrucha
33. Router Guards 33 Home component Admin component CanLoad Guard Lazy loaded! @pietrucha
34. Router Guards 34 @Injectable() export class AuthService implements CanLoad, CanActivate { private _isLogged = false; constructor(private snackBar: MdSnackBar, private router: Router) { } public setLogin(isLogged: boolean) { this._isLogged = isLogged; } public isLogged(): boolean { return this._isLogged; } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean|Observable<boolean>|Promise<boolean>{ this.showSnackBarIfNecessary(); return this._isLogged; } canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> { this.showSnackBarIfNecessary(); return this._isLogged; } private showSnackBarIfNecessary() { if (!this._isLogged) { this.snackBar.open('You have to be logged in!', 'OK', { duration: 3000, }); } } } @pietrucha
35. Router Guards 35 @Injectable() export class AuthService implements CanLoad, CanActivate { private _isLogged = false; constructor(private snackBar: MdSnackBar, private router: Router) { } public setLogin(isLogged: boolean) { this._isLogged = isLogged; } public isLogged(): boolean { return this._isLogged; } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean|Observable<boolean>|Promise<boolean>{ this.showSnackBarIfNecessary(); return this._isLogged; } canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> { this.showSnackBarIfNecessary(); return this._isLogged; } private showSnackBarIfNecessary() { if (!this._isLogged) { this.snackBar.open('You have to be logged in!', 'OK', { duration: 3000, }); } } } @pietrucha
36. Router Guards 36 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', canLoad: [AuthService] } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })], exports: [RouterModule] }) export class AppRoutingModule { } @pietrucha
37. Router Guards 37 const routes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent, }, { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', canLoad: [AuthService] } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })], exports: [RouterModule] }) export class AppRoutingModule { } @pietrucha
38. Router Guards 38 const routes: Routes = [ { path: '', component: AdminComponent, canActivate: [AuthService] } ]; @NgModule({ imports: [ RouterModule.forChild(routes), CommonModule ], declarations: [AdminComponent] }) export class AdminModule { } @pietrucha
39. Router Guards 39 const routes: Routes = [ { path: '', component: AdminComponent, canActivate: [AuthService] } ]; @NgModule({ imports: [ RouterModule.forChild(routes), CommonModule ], declarations: [AdminComponent] }) export class AdminModule { } @pietrucha
40. Demo 40 Show me the demo! @pietrucha
41. Thank you! angular-academy.com @pietrucha
42. Warsaw, 28-29 October Angular Academy Training angular-academy.com