localize-router icon indicating copy to clipboard operation
localize-router copied to clipboard

changeLanguage does not work for route with parameters

Open azhararmar opened this issue 6 years ago • 6 comments

I'm submitting a ... (check one with "x")

[*] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if similar feature request does not exist
[ ] support request => Suggested place for help and support is [stackoverflow](https://stackoverflow.com/), search for similar question before posting

Description

When I try to use changeLang for route with parameters, it tries to construct invalid url resulting in the following error (however it works fine for route without any parameters)

Cannot match any routes. URL Segment: ar/venue%2Fmovenpick-hotel-kuwait-1;slug=movenpick-hotel-kuwait-1

I have following routes

export const routes: Routes = [
	{
		path: 'venue',
		component: HomeComponent
	},
	{
		path: 'about-us',
		component: AboutUsComponent
	},
	{
		path: 'search-result',
		component: SearchResultComponent
	},
	{
		path: 'venue/:slug',
		component: BusinessComponent,
	},
	{
		path: 'venue/:venue-slug/:meeting-room-slug',
		component: MeetingRoomComponent,
		children: [
			{
				path: 'description',
				component: BusinessDescriptionComponent
			},
			{
				path: 'terms',
				component: BusinessTermsComponent
			}
		]
	},
];

It throws mismatch route error for path venue/:slug and venue/:venue-slug/:meeting-room-slug but works fine for the rest of route.

What I understand from error is, for example for route venue/:slug with slug value movenpick-hotel-kuwait-1, it tries and construct the route ar/venue%2Fmovenpick-hotel-kuwait-1;slug=movenpick-hotel-kuwait-1 the extra parameter that is added here is ;slug=movenpick-hotel-kuwait-1 in the end. If it constructs just the ar/venue%2Fmovenpick-hotel-kuwait-1 it must work.

urlSegments in LocalizeRouterService.prototype.changeLanguage returns me following object

0: "/ar"
1: "venue/movenpick-hotel-kuwait-1"
2: {slug: "movenpick-hotel-kuwait-1"}

Problem is with the last element in the object, because URL already has slug value, it tries and add slug at the end as well resulting with the issue.

🌍 Your Environment

Angular Version:

Angular CLI: 7.1.4
Node: 11.2.0
OS: darwin x64
Angular: 7.1.4

Localize Router Version: 2.0.0-RC.1

azhararmar avatar Jan 14 '19 23:01 azhararmar

Issue related to https://github.com/Greentube/localize-router/issues/151

azhararmar avatar Jan 14 '19 23:01 azhararmar

Same issue here

macure avatar Feb 11 '19 20:02 macure

same issue here, downgrading Angular router did not help. Solution from #151 is working for me!

hohler avatar Feb 22 '19 15:02 hohler

I found a solution, what I did previously is making routes like this and it resulted into errors when trying to change the language. { path: 'rewards', component: RewardOverviewComponent, }, { path: 'rewards/:id', component: RewardDetailComponent, }, however when you build your routes like this:

{ path: 'rewards', children: [ { path: '', component: RewardOverviewComponent }, { path: ':id', component: RewardDetailComponent } ] },

pixelatorz avatar Jan 03 '20 10:01 pixelatorz

Same issue here. The suggestion of children routes is unfortunately not suitable in all situations.

ntopulos avatar Jan 15 '20 11:01 ntopulos

instead of changelanguage try using this window.location.href = this.router.url.replace(this.localize.parser.currentLang, lang);

LaithMuhaiesn avatar Nov 12 '23 13:11 LaithMuhaiesn