This should technically be achievable using window.location.reload(): HTML: <button (click)=”refresh()”>Refresh</button> TS: refresh(): void { window.location.reload(); } Update: Here is a basic StackBlitz example showing the refresh in action. Notice the URL on “/hello” path is retained when window.location.reload() is executed.
With the new version of the router, If you want to use nested routes, here is an example on how to define the path { path: ‘search’, component: SearchComponent, children: [ { path: ‘results/:id’, component: ResultsComponent }, ] } and in your SearchComponent template, add <router-outlet></router-outlet>
You can set the data parameter of the route with the role like this const appRoutes: Routes = [ { path: ‘account/super-secure’, component: SuperSecureComponent, canActivate: [RoleGuard], data: { roles: [‘super-admin’, ‘admin’] } }]; and then have this in canActivate of RoleGuard: canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { let roles = route.data[“roles”] as Array<string>; return (roles … Read more
You can use the activated route component’s snapshot to get this url. import { Router, ActivatedRoute } from ‘@angular/router’; constructor( private router: Router, private activatedRoute: ActivatedRoute) { console.log(“routes”); console.log(activatedRoute.snapshot.url); // array of states console.log(activatedRoute.snapshot.url[0].path); } Link to original SO answer by Jose G Varanam How to get current route
You can listen for two router events: RouteConfigLoadStart RouteConfigLoadEnd They fire when a lazy loaded module is being loaded. The advantage of using these over the standard router events such as NavigationStart is that they won’t fire on every route change. Listen to them in your root AppComponent to show / hide your spinner. app.component.ts … Read more
You are probably calling the router.navigate function inside a click event. <button class=”btn btn-default” (click)=”save()”>Save</button> And the save function being something like save() { //Do stuff this._router.navigate([“https://stackoverflow.com/users”, { id: userId } ]); } This works on IE11 and Edge browsers, but would reload the application in Chrome. This is because of a missing type in … Read more
I had this same issue after going through the Route Guards section of Routing and Authorization tutorial on the Angular website https://angular.io/docs/ts/latest/guide/router.html, it is section 5. I am adding AuthGuard to one of my main routes and not to child routes like the tutorial shows. I fixed it by added AuthGuard to my list of … Read more
loadChildren needs to reference module with routing By assigning a value to loadChildren property inside a route, you have to reference a module, which has a routing system implemented. In other words reference only a module that imports RoutingModule and configures it with forChild(routes) method. import { NgModule } from ‘@angular/core’; import { RouterModule, Routes … Read more
Service here is a singleton that belongs to root injector and is injected with root ActivatedRoute instance. Outlets get their own injector and own ActivatedRoute instance. The solution here is to let route components have their own Service instances: @Component({ … providers: [Service] }) export class MainComponent { … }
General information NGRX Router docs ngrx router is Deprecated! There is migration strategy from ngrx router to the standard Angular2 Router. Angular2 Router docs Default solution from Angular team Was inspired by UI-router from AngularJS Built for components Angular2 Router has almost all UI-router features. NG2 UI-router docs Well known UI-router from AngularJS updated for … Read more