angular2-routing

Angular2 router: how to correctly load children modules with their own routing rules

by

You can try this using loadChildren where the homeModule, productModule, aboutModule have their own route rules. const routes: Routes = [ { path: ‘home’, loadChildren: ‘app/areas/home/home.module#homeModule’ }, { path: ‘product’, loadChildren: ‘app/areas/product/product.module#ProductModule’ }, { path: ‘drawing’, loadChildren: ‘app/areas/about/about.module#AboutModule’ } ]; export const appRouting = RouterModule.forRoot(routes); and the home route rules will be like export const … Read more

Angular2 Query Params Subscription Fires Twice

by

Router observables (as another answer mentions) are BehaviorSubject subjects, they differ from regular RxJS Subject or Angular 2 EventEmitter in that they have the initial value pushed to the sequence (an empty object in the case of queryParams). Generally the possibility of subscribing with initialization logic is desirable. The initial value can be skipped with … Read more

In angular 2 how to preserve query params and add additional query params to route

by

In Angular 4+, preserveQueryParams has been deprecated in favor of queryParamsHandling. The options are either ‘merge’ or ‘preserve’. In-code example (used in NavigationExtras): this.router.navigate([‘somewhere’], { queryParamsHandling: “preserve” }); In-template example: <a [routerLink]=”[‘somewhere’]” queryParamsHandling=”merge”>

Angular 2 resolver with loading indicator

by

You can use the “reacting to routing events” strategy that consist to implement the App to react when any routing event occurs. To do that, you will need in your app.component.ts some code like: import { Component } from ‘@angular/core’; import { Router, RouterEvent, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from ‘@angular/router’; @Component({ selector: ‘app-root’, templateUrl: … Read more

Angular2 Router and Multiple Resolves in one route

by

Alright, I hope I haven’t misunderstood the question. Angular’s router supports as many resolvers per route as you want. In the route declaration, the resolve property is an object and it can have as many keys as you’d like: { path: ”, component: DashboardComponent, resolve: { foo: Resolver1 bar: Resolver2, // more resolves here… } … Read more

Angular 2 – how to use the new angular 2.0.0-rc.1 router

by

Here is how to use the Angular 2 Router (RC1), compared to the beta (deprecated) one: Routes replaces RouteConfig. Inside your config there is a new syntax: {path: ‘/path’, component: MyPathComponent} instead of: {path:’/path’, name: ‘MyPath’, component: MyPathComponent} Using routerLink is now like that: <a [routerLink]=”[‘/path/2’]”>Click to navigate</a> Instead of: <a [routerLink]=”[‘MyPath’, ‘Detail’, {id:2}]”>Shark Crisis</a> … Read more

Angular redirect to default child view

by

you can use an empty child route instead : { path: ‘tenant’, component: TenantComponent, children: [ { path: ”, pathMatch: ‘full’, redirectTo: ‘audit’ }, { path: ‘audit’, component: PacketDataComponent, data: { authorities: [‘ROLE_USER’, ‘ROLE_ADMIN’], pageTitle: ‘tenant.home.title’ }, } ] }

Angular testing router params breaks test bed

by

I figured out the problem/solution. We’re seeing Cannot read property ‘_lastPathIndex’ of undefined because at one point the Angular router expects a _lastPathIndex property on a snapshot object. The relevant part of the Angular source code looks like this: if (route.snapshot._lastPathIndex === -1) { return new Position(route.snapshot._urlSegment, true, 0); } If snapshot is undefined, it … Read more

How to call a function on every route change in angular2

by

you can call activate method from main router-outlet like this <router-outlet (activate)=”changeOfRoutes()”></router-outlet> which will call every time when route will change. Update – Another way to achieve the same is to subscribe to the router events even you can filter them out on the basis of navigation state may be start and end or so, … Read more