Changes in angular 2 urls after reload

Question

I have urls with queryParams and params in my angular 2 app. And i'm stuck with problem: after reloading pages my urls distorted.

with params:

http://127.0.0.1:8000/albums?user_id=1

after reload:

http://127.0.0.1:8000/albums/?user_id=1

with queryParams:

http://127.0.0.1:8000/albums/%3Aid;id=13

after reload:

http://127.0.0.1:8000/albums/%3Aid%3Bid%3D13

routes.ts

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

import { HomeComponent } from './components/home/home.component';
import { LoginComponent }  from './components/login/login.component';
import { RegisterComponent }  from './components/register/register.component';
import { AlbumsComponent }  from './components/albums/albums.component';
import { AddAlbumComponent }  from './components/albums/add-album.component';
import { AddImageAlbumComponent }  from './components/albums/add-image-album.component';
import { AlbumDetailComponent }  from './components/albums/album-detail.component';
import { PhotosComponent }  from './components/photos/photos.component';
import { UsersComponent }  from './components/users/users.component';
import { AuthGuard } from './guards/auth.guard'

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'albums', component: AlbumsComponent, canActivate: [AuthGuard] },
    { path: 'add-album', component: AddAlbumComponent, canActivate: [AuthGuard] },
    { path: 'add-image-album/:id', component: AddImageAlbumComponent, canActivate: [AuthGuard] },
    { path: 'albums/:id', component: AlbumDetailComponent, canActivate: [AuthGuard] },
    { path: 'photos', component : PhotosComponent, canActivate: [AuthGuard] },
    { path: 'users', component : UsersComponent, canActivate: [AuthGuard] }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

navigation with params:

[routerLink]="['/albums/:id', {id: album.id}]

navigation with queryParams:

[queryParams]="{user_id: dataService.getCurrentUserId()}"

Looks like something wrong with your navigation code. Can you show your component where you handle navigation. — Paul Samsotha
– Paul Samsotha, Commented Oct 29, 2016 at 9:37

Community · Accepted Answer · 2017-05-23 10:31:06Z

0

After url decoding your reloaded queryparams url, I get this:

http://127.0.0.1:8000/albums/:id;id=13

It is essentially the same as your original url, but with the params fully url encoded.

Update:

If you need a reference on how to force decode the url, you can look at this previous stack overflow question

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 17, 2017 at 6:17

Judd Franklin

5702 gold badges5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vignesh · Accepted Answer · 2017-03-22 11:06:48Z

0

Pass the param in RouteLink itself for exmaple see the below code

[routerLink]="[/albums,nav.param]"

And in Routing declare like this

{ path: 'albums/:id', component: AlbumsComponent }

And in albumscomponent.ts read the url param value using activateroute.

answered Mar 22, 2017 at 11:06

Vignesh

2,3844 gold badges28 silver badges48 bronze badges

Collectives™ on Stack Overflow

Changes in angular 2 urls after reload

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related