Angular 5 localize-router set route with country/lang code

Question

Here is my problem. I have to set up routing in Angular so that in URL there will be a country code and a language. for example

https://example.com/usa/en

The tricky part is that this localization parts can change so I have a button to switch country and language so it will be /gb/en or /usa/fr.

How can I get it working like this using localize-router and ngx-translate.

Any help much appreciated.

Wallsend

Do you need this country/language code for each route or just as an entry point of your app ? – Kraemer

each route needs to have this combo. This is a requirement for SEO purposes - we are using Angular Universal server-side rendering. – Wallsend

You can use the router for this without using localize router. by adding root urls are like this route: [{path: ':country/:lang', children[ < YOUR OTHERS COMPONENTS GOES HERE />]}] – Abessive

@PiotrSmyda: For your additional information, medium.com/frontend-fun/… – Demolition

Answer 1

Pardon me if I got your question wrong, but if I understand it correctly you can follow below approach:

In your AppRoutingModule configure routes as below:

const routes: Routes = [
  { 
     path:'' , pathMatch: 'full', component: SomeComponent,
     children: [
        { path: ':country-code/:lang-code' , component: SomeOtherComponent }
     ]
  }
]

You can now redirect by your button click event and it changes country-code and lang-code accordingly and you can retrieve these values in your SomeOtherComponent to perform related tasks.

Pornography