0

It is possible to configure the Angular2 router (with the hash location strategy) to preserve query parameters? When I load the page, it removes the query string and appends it to the URL fragment, and when I click on a router link, the query string disappears entirely. I would like the router to not touch the query string at all, just keep it the way it is, and only modify the URL fragment.

i'm referring to the state where user is directed to my site from a different site and i need to preserve the url params to get the users id and data from a service

app-routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NavigationExtras } from '@angular/router';

import { HomeComponent } from '../components/home.component';
import { OneComponent } from '../wizard/one.component';

const routes: Routes = [
    { path: '**', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'one', component: OneComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true }) ],
    exports: [ RouterModule ]
})

export class AppRoutingModule {
}

app.modul.ts

import './rxjs-extensions';
import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { RouterModule }   from '@angular/router';
import { AppRoutingModule } from './modules/app-routing.module'
import { HttpModule }    from '@angular/http';

import { AppComponent } from './components/app.component';
import { TofesService } from './services/tofes.service';
import { HomeComponent } from './components/home.component';


import { OneComponent } from './wizard/one.component';
import { ExampleOneComponent } from './wizard/example-one.component';
import { ExampleOneStep1Component } from './wizard/example-one-step1.component';
import { ExampleOneStep2Component } from './wizard/example-one-step2.component';
import { ExampleOneStep3Component } from './wizard/example-one-step3.component';
import { ExampleTwoModule } from './wizard/example-two.module';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
      HttpModule,

      ExampleTwoModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    OneComponent,
    ExampleOneComponent,
    ExampleOneStep1Component,
    ExampleOneStep2Component,
    ExampleOneStep3Component,
  ],
  providers: [
      TofesService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

app.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})

export class AppComponent {
  title = 'Tofes 101 Web';
}
galrave
  • 40
  • 10
  • this is by no means a duplicate question !! the original question was not answered at all! try to read the question before you trash it! – galrave Dec 11 '16 at 14:57
  • I don't see how any of this is not answered. You need to pass `preserveQueryParams` to get them preserved. – Günter Zöchbauer Dec 11 '16 at 15:05
  • it might be true but the how of in was not answered, and my question was very detailed, and i would expect a relevant answer not a general statment – galrave Dec 11 '16 at 15:20
  • Your question is all but detailed. It doesn't even contain code or an example to reproduce or that demonstrates what you tried and where you failed. – Günter Zöchbauer Dec 11 '16 at 15:21
  • add all related code, you ware right about that – galrave Dec 11 '16 at 15:29
  • Sorry, but the code doesn't make much sense to me. I don't think it's a minimal example http://stackoverflow.com/help/mcve, it also doesn't contain any routerlink (like you mentioned that doesn't work) or code that is related to query params. To me it looks like you just throw some random code in. – Günter Zöchbauer Dec 11 '16 at 15:32
  • the link are in the app-routing.module.ts file `const routes: Routes = [ { path: '**', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'one', component: OneComponent } ];` and are used in the app.modul.ts its taken directly from the angular 2 tutorial – galrave Dec 11 '16 at 19:08

0 Answers0