Angular 4 create different language path route to the same component

Question

I want to create the multi-language support for the website. I'm currently using ngx-translate to translate all the text . Let's way we have two urls, mypage/en/home and mypage/es/home. How can I create those language paths and route them to home component?

Answer 1

Updated based on comment:

In the routes for the router you can do something like this:

export const routes: Routes =[
  {
    path: 'mypage/:language/home', component: HomeComponent
  }
]

This way you actually only need one route and can have as many languages as you want.

Then in your component you can do:

public constructor (
  route: ActivatedRoute
){
  this.language = this.route.snapshot.params['language'];  
}

If you really want multiple routes, you can do something like this:

export const routes: Routes =[
  {
    path: 'mypage/en/home', component: HomeComponent
  }
  {
    path: 'mypage/es/home', component: HomeComponent
  }
]