This presentation talks about the Angular router covering the basic routing technique, Angular router events, guards, route resolvers, lazy loading of routes, and the latest changes in the Angular router (Angular v7, v8, v9)
- Navigates to the configured routes for the components which are routable. - import the RouterModule - configure the router states - navigate from one view to another
Import the RouterModule import { Routes, RouterModule } from '@angular/router'; @NgModule({ imports: [RouterModule.forRoot(routes)] }) Tip With a separate routing module, AppRoutingModule, export the RouterModule in the exports array.
const routes: Routes = [ { path: 'connect', component: ConnectComponent }, { path: 'profile', component: ProfileComponent, }, { path: ‘**’, component: WildCardComponent } Tip Do not place the wildcard route before any other, as the route states are checked in the order defined in the configuration. configure the router states
canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable|Promise|boolean|UrlTree { return this.permissions.canActivate(this.currentUser, route.params.id); } Create a guard ng g guard canActivate guard function always runs before fetching the data, pointless to load data before ensuring if activation will take place.
{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)}; canLoad guard load a particular module only if it can be loaded. This means that check the criteria before loading it Read about preloading strategies here: https://angular.io/guide/ro uter#how-preloading- works
v9 - make routerLinkActive work with query params which contain arrays Object.keys(containee).every(key => containee[key] === container[key]); //changed to Object.keys(containee).every(key => equalArraysOrString(container[key], containee[key]));