OK realized a mistake .. it has to be /:id/:id2 Anyway didn’t find this in any tutorial or other StackOverflow question. @RouteConfig([{path: ‘/component/:id/:id2’,name: ‘MyCompB’, component:MyCompB}]) export class MyCompA { onClick(){ this._router.navigate( [‘MyCompB’, {id: “someId”, id2: “another ID”}]); } }
I don’t think there is a way to define that in the routes configuration. Currently it is supported for routerLinks and imperative navigation to enable preserveQueryParams and preserveFragment You can add a guard to the empty path route, where in the guard navigation to the /comp1 route is done. router.navigate([‘/comp1’], { preserveQueryParams: true }); //deprecated. … Read more
canActivate needs to return an Observable that completes: @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AngularFireAuth, private router: Router) {} canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean { return this.auth.map((auth) => { if (auth) { console.log(‘authenticated’); return true; } console.log(‘not authenticated’); this.router.navigateByUrl(‘/login’); return false; }).first(); // this might not be necessary – ensure `first` is imported if you … Read more
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
Import BrowserModule, BrowserAnimationsModule, HttpModule or HttpClientModule only once, preferably in your root module.
For version v2.2.2 and newer In version v2.2.2 and up, name property no longer exists and it shouldn’t be used to define the route. path should be used instead of name and no leading slash is needed on the path. In this case use path: ‘404’ instead of path: ‘/404’: {path: ‘404’, component: NotFoundComponent}, {path: … Read more
Update: Sep 2019 As a few people have mentioned, the parameters in paramMap should be accessed using the common MapAPI: To get a snapshot of the params, when you don’t care that they may change: this.bankName = this.route.snapshot.paramMap.get(‘bank’); To subscribe and be alerted to changes in the parameter values (typically as a result of the … Read more
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
The current Angular Router provides Navigation Events. You can subscribe to these and make UI changes accordingly. Remember to count in other Events such as NavigationCancel and NavigationError to stop your spinner in case router transitions fail. app.component.ts – your root component … import { Router, // import as RouterEvent to avoid confusion with the … Read more
Here’s an updated example using Angular 4 (also compatible with Angular 5 – 8) Routes with home route protected by AuthGuard import { Routes, RouterModule } from ‘@angular/router’; import { LoginComponent } from ‘./login/index’; import { HomeComponent } from ‘./home/index’; import { AuthGuard } from ‘./_guards/index’; const appRoutes: Routes = [ { path: ‘login’, component: … Read more