angular2-routing

Angular2 without hash in the url

If you are using Angular final, the reasons to the hash could be: RouterModule.forRoot(yourRoutesHere, { useHash: true }) So by removing that could help. RouterModule.forRoot(yourRoutesHere) Alternatively if you in your providers (in NgModule) have used: {provide: LocationStrategy, useClass: HashLocationStrategy} just remove that. EDIT, if you need LocationStrategy, try changing HashLocationStrategy to PathLocationStrategy: {provide: LocationStrategy, useClass: … Read more

Angular 2 Final Release Router Unit Test

For testing we now create a testing module using TestBed. We can use the TestBed#configureTestingModule and pass a metadata object to it the same way we would pass to @NgModule beforeEach(() => { TestBed.configureTestingModule({ imports: [ /* modules to import */ ], providers: [ /* add providers */ ], declarations: [ /* components, directives, and … Read more

Angular 2 – Routing – CanActivate work with Observable

You should upgrade “@angular/router” to the latest . e.g.”3.0.0-alpha.8″ modify AuthGuard.ts @Injectable() export class AuthGuard implements CanActivate { constructor(private loginService: LoginService, private router: Router) {} canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return this.loginService .isLoggedIn() .map((e) => { if (e) { return true; } }) .catch(() => { this.router.navigate([‘/login’]); return Observable.of(false); }); } } If you have … Read more

How to unit test a component that depends on parameters from ActivatedRoute?

The simplest way to do this is to just use the useValue attribute and provide an Observable of the value you want to mock. RxJS < 6 import { Observable } from ‘rxjs/Observable’; import ‘rxjs/add/observable/of’; … { provide: ActivatedRoute, useValue: { params: Observable.of({id: 123}) } } RxJS >= 6 import { of } from ‘rxjs’; … Read more

Pass parameter into route guard

Instead of using forRole(), you can do this: { path: ‘super-user-stuff’, component: SuperUserStuffComponent, canActivate: [RoleGuard], data: {roles: [‘SuperAdmin’, …]} } and use this in your RoleGuard canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean { let roles = route.data.roles as Array<string>; … }

Redirect to a different component inside @CanActivate in Angular2

As of today, with latest @angular/router 3.0.0-rc.1, here are a couple of references on how to do that through CanActivate guards on routes: angular 2 reference Two answers to this SO question, by Nilz11 and by Jason The main gist of logic looks like: // … canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (this.authService.isLoggedIn) { // … Read more

Get route query params

update (2.0.0 final) (somepath/:someparam/someotherpath) you can subscribe to them using _router.queryParams.subscribe(…): export class HeroComponent implements OnInit { constructor(private _activatedRoute: ActivatedRoute, private _router:Router) { _activatedRoute.queryParams.subscribe( params => console.log(‘queryParams’, params[‘st’])); original If you want queryParams instead of route params (somepath/:someparam/someotherpath) you can subscribe to them using _router.routerState.queryParams.subscribe(…): export class HeroComponent implements OnInit { constructor(private _activatedRoute: ActivatedRoute, private … Read more

How do I navigate to a sibling route?

If you are using the new router (3.0.0-beta2), you can use the ActivatedRoute to navigate to relative path as follow: constructor(private router: Router, private r:ActivatedRoute) {} /// // DOES NOT WORK SEE UPDATE goToContact() { this.router.navigate([“../contacts”], { relativeTo: this.r }); } Update 08/02/2019 Angular 7.1.0 current route: /department/7/employees/45/sales the old version will do: /department/7/employees/45/sales/contacts As … Read more