angular2-routing

I have three components, each have their own resolver that fetch data from a different API. To do so, these components rely on an url, that is shared between them using a service. I want that when a change to that url happens, each components reloads itself, i.e to restart the resolvers. I had a look at several related S.O questions, but none mention how to do so when using resolvers, cf : question 1 , question 2 , question 3 I can think of two ways : The dirty way : Force the refreshing of the component using a router redirect and a blank component. this.router.navigateByUrl('blank',true);

I'm trying to understand the way of creating a route, with some information in it's URL parameters. This is my route (app.routes.ts): {path: 'results/:id', component: MyResultsComponent}, This is how I navigate to the route : goToResultsPage(query: string) { this.router.navigate(['results', query], { queryParams: { pageSize: 20 } });} As you can see, I've also a query parameter. I was wondering, what is the best and cleanest way to retrieve this in my MyResultsComponent . Right now I've kind of a nested subscribe structure: ngOnInit() { this.route .params .subscribe(params => { this.query =

I have a component registered at /contacts , which displays a list of contacts. I've added an <input [value]="searchString"> for filtering the displayed list. Now I'd like to display the searchString within the URL in form of a Query Param. (Using the New Router 3.0.0 RC2) The official docs ( https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters ) show how to use router.navigate for changing the queryParams . But this seems awkward, because I just want to change the queryParams without having to know which route I'm currently at: router.navigate(['/contacts'], {queryParams:

I have a simple Loader Service that hides and shows certain loaders. I'm working on something that will be used a lot with slow connections and I need to show/hide a loader between route changes. I can hide the loader when the new route is loaded with the following. this._Router.subscribe(() => { this._LoaderService.hide(); }) I'm trying to find a way that I can call my this._LoaderService.show() function immediately when any [routerLink] is clicked (at the start of the route change, not the end). I've had a look around and I tried https://angular.io/docs/ts/latest/api/router/Router-class.html

I am new to angular2. I am trying to understand how to use multiple <router-outlets> in a particular template. I have gone though many QA here but couldn't resolve my error. router.module.ts const routes: Routes = [ { path: '', redirectTo: 'one', pathMatch: 'full' }, { path: 'two', component: ClassTwo, children: [ { path: 'three', component: ClassThree, outlet: 'nameThree', }, { path: 'four', component: ClassFour, outlet: 'nameFour' } ] },]; component1.html <h3>In One</h3> <nav> <a routerLink="/two" class="dash-item">...Go to Two...</a> <a routerLink="/three" class="dash-item">... Go to THREE.

I need to either set <base> in the HTML or APP_BASE_HREF during the bootstrap for Angular 2 to not throw exceptions. If I set either of these then Electron , thinking in terms of the file system, throws exceptions in browser_adapter.ts when trying to match a route: EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'C:'. Available routes: ['/dashboard', '/accounts']. I tried using just the HashLocationStrategy mentioned in this blog post , but Angular still complains about the base href not being set. Since the href attribute can take a relative path and thanks

I have been working on an angular 4 app. It is working fine on Mozilla and chrome but when we access it on the Microsoft edge browser, on the first load, it is not working and there is no error in the console. But when I refresh the page then it works fine. I don't understand the problem. If anybody knows about this please let me know. I have used the following dependencies in my app: "dependencies": { "@agm/core": "1.0.0-beta.0", "@angular/animations": "^4.3.2", "@angular/common": "^4.2.2", "@angular/compiler": "^4.2.2", "@angular/core": "^4.2.2", "@angular/flex-layout": "2.0.0-beta.8", "