This document summarizes 8 things to know about the Angular Router and provides one bonus item. It discusses lazy loading modules, preloading modules, router events, enabling traces for debugging, auxiliary routes, route transitions using animations, route guards, and passing data between routes via the state object. The document provides code examples and indicates the content will be demonstrated. It promotes understanding of advanced Angular Router capabilities.

1. 8 things you didn't know
about the Angular Router,
you won't believe #6!
Laurent Duveau – May 21th 2019

2. Who am I ?
Laurent Duveau
• I live in Montreal, Canada
• Founder of the Angular Academy
• 2-day Angular Classroom Training
• 152 classes in the last 3 years!
• @LaurentDuveau

3. Who am I ?
Laurent Duveau
• I live in Montreal, Canada
• Founder of the Angular Academy
• 2-day Angular Classroom Training
• 152 classes in the last 3 years!
• @LaurentDuveau
I LOVE
ANGULAR!

4. Angular Router
Client-Side Routing
Navigate between views in a SPA just like you
navigate pages in a normal site
Refresh the page and keep the location in app
Bookmark the URL, share it with others
Works with Browsers back/forward history

5. Sample
project Products Module
App Module

6. Sample
project Products Module
App Module
const routes: Routes = [
{path: '', redirectTo:'/home', pathMatch:'full'},
{path: 'home', component: HomeComponent},
{path: 'contact', component: ContactComponent},
];
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
children: [
{ path: '', component: ProductListComponent },
{ path: 'insert', component: ProductInsertComponent },
{ path: ':id', component: ProductDetailComponent }
]
}
];

7. DEMONSTRATION
7

8. #1
Lazy Loading
8

9. Lazy Loading ?
Loading a module later
Better startup performance
The delay is during the loading on demand
Happens with the Router!

10. Lazy load the Products Module!
const routes: Routes = [
{path: '', redirectTo:'/home', pathMatch:'full'},
{path: 'products', loadChildren:'./products/products.module#ProductsModule'},
{path: 'home', component: HomeComponent},
{path: 'contact', component: ContactComponent},
];
app.routing.ts

11. New syntax coming with Angular V8 and Ivy!
const routes: Routes = [
{path: '', redirectTo:'/home', pathMatch:'full'},
{path: 'products', loadChildren:'./products/products.module#ProductsModule'},
{path: 'products', loadChildren: () =>
import('./products/products.module').then(m => m.ProductsModule)},
{path: 'home', component: HomeComponent},
{path: 'contact', component: ContactComponent},
];
app.routing.ts
Old syntax still here for non-ivy
or Angular 7 and below
Using dynamic import
(new web standard)
the new rendering pipeline
Well… use one syntax or the other, not both together!

12. Make its routes relative to ‘products/‘
products.routing.ts
products.routing.ts
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
children: [
{ path: '', component: ProductListComponent },
{ path: 'insert', component: ProductInsertComponent },
{ path: ':id', component: ProductDetailComponent }
]
}
]; const routes: Routes = [
{
path: '',
component: ProductsComponent,
children: [
{ path: '', component: ProductListComponent },
{ path: 'insert', component: ProductInsertComponent },
{ path: ':id', component: ProductDetailComponent }
products.routing.ts … so we do not want
http://mysite.com/products/products
We lazy load this module with:
http://mysite.com/products

13. Do not import lazy loaded modules!
@NgModule({
imports:[BrowserModule, HttpModule, ProductsModule],
})
export class AppModule { }
app.module.ts
@NgModule({
imports:[BrowserModule, HttpModule],
})
export class AppModule { }
app.module.ts
If you leave it here… you’ll get
the opposite effect (eager load)

14. DEMONSTRATION
14

15. #2
Preloading
Modules
15

16. Preloading Modules!
Preload a lazy-loadable module in the background
while the user is interacting with your application
When module is needed it might be available
immediately
This is about anticipation
16

17. Preloading Modules!
* Pictures by Victor Savkin – vsavkin.com

18. Preloading Modules!
* Pictures by Victor Savkin – vsavkin.com

19. Preloading Modules!
* Pictures by Victor Savkin – vsavkin.com

20. Preloading Modules!
* Pictures by Victor Savkin – vsavkin.com

21. Preloading Modules!
One built-in preloading strategy: PreloadAllModules
Create your Custom Preloading Strategy!
Class that implements PreloadingStrategy
@NgModule({
imports: [RouterModule.forRoot(routes,
{ preloadingStrategy: PreloadAllModules })],
exports: [RouterModule],
})
export class AppRoutingModule { }

22. Preloading Modules
ngx-quicklink (Open source library)
Router preloading strategy which automatically
downloads lazy-loaded modules associated with all
the visible links in the viewport when the browser is
idle.
22
https://www.npmjs.com/package/ngx-quicklink

23. DEMONSTRATION
23

24. #3
Router Events
24

25. Router Events
Event Description
NavigationStart Navigation starts
RoutesRecognized Router parses the URL and the routes are recognized
RouteConfigLoadStart Before the Router lazy loads a route configuration
RouteConfigLoadEnd After a route has been lazy loaded
NavigationEnd Navigation ends successfully
NavigationCancel Navigation is canceled. This is due to a Route Guard
returning false during navigation
NavigationError Navigation fails due to an unexpected error
+ more…

26. Router Events
26
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(private router: Router) {}
ngOnInit() {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('NavigationEnd:', event);
}
});
}
}

27. #4
Diagnostic with
traces
27

28. Activate Router traces
@NgModule({
imports: [RouterModule.forRoot(routes,
{ enableTracing: environment.production ? false : true }
)]
})
export class AppRoutingModule { }
app-routing.module.ts

29. DEMONSTRATION
29

30. #5
Auxiliary Routes
30

31. Auxiliary Routes
Navigation happens in a
<router-outlet></router-outlet>
We can have more than one!
So we can navigate to several routes at the same time!

32. Auxiliary Routes
Create a named router-outlet
Add a route to target this outlet
Link to navigate to the outlet
<router-outlet></router-outlet>
<router-outlet name="side"></router-outlet>
{path:'contact', component:ContactComponent, outlet:'side'}
<a [routerLink]="[{outlets: {side:['contact']}}]">Contact</a>

33. DEMONSTRATION
33

34. #6
Routes Transitions
(Animations)
34

35. Animations
Define animations files
import { trigger, animate, transition, style } from '@angular/animations';
export const fadeInAnimation =
// trigger name for attaching this animation to an element using the
[@triggerName] syntax
trigger('fadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// css styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('.5s', style({ opacity: 1 }))
]),
]);
fade-in.animation.ts

36. Animations
Import BrowserAnimationsModule
Use in @Component decorator
@Component({
selector: 'app-product-list’,
animations: [fadeInAnimation],
host: { '[@fadeInAnimation]': ''}
})
export class MyComponent {
animation to use
attached to host to run
animation when
component is activated

37. DEMONSTRATION
37

38. #7
Guards
38

39. Routes Guards
CanActivate CanDeactivate
NavigationNavigation
Component
Decides if a route can be activated
- User logged-in ?
Decides if a route can be deactivated
- Form saved ?

40. Routes Guards
40
export class LoginRouteGuard implements CanActivate {
constructor(
private loginService: LoginService,
private router: Router) {}
canActivate() {
if(!this.loginService.isLoggedIn()) {
this.router.navigateByUrl("/login");
return false;
}
return true;
}
}
login-route-guard.service.ts
{ path: 'admin', component: AdminComponent, canActivate: [LoginRouteGuard] },
app-routing.module.ts

41. DEMONSTRATION
41

42. #8
Passing data via state
object during navigation
(new in 7.2)
42

43. Passing Data between Routes
Setting the State
@Component({
template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent {
constructor(public router: Router) {}
navigateWithState() {
this.router.navigateByUrl('/123', { state: { hello: 'world' } });
}
}
@Component({
selector: 'my-app',
template: `
<a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent {}
Imperative navigation
Declarative navigation
OR

44. Passing Data between Routes
Reading the State
@Component({
selector: 'app-details-page',
template: '<pre>{{ state$ | async | json }}</pre>'
})
export class DetailsPageComponent implements OnInit {
state$: Observable<object>;
constructor(public activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.state$ = this.activatedRoute.paramMap
.pipe(map(() => window.history.state))
}
}

45. DEMONSTRATION
45

46. #9
Route Resolver
46
Bonus!

47. Route Resolver
Pre-fetching component data before navigating
Avoid a blank component while waiting for the
data to be returned from the server
Pre-fetch data from the server so it's ready the
moment the route is activated!
Create a service and implement the Resolve
interface

48. DEMONSTRATION
48