Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Routing: Is it possible to use different 'path' strings for different languages?

I'm doing an i18n Angular app, so far it works great.

However I have same route strings for different languages, which isn't best for SEO.

Is it possible to have 'path' properties of Routes array be different for each language?

Ex:

const appRoutesEN: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '**', component: PageNotFoundComponent }
];

Is it possible to define also a appRoutesFR: Routes if yes how I can use it? Shall I inject LOCALE_ID to routing module? If so how?

like image 848
Bogac Avatar asked May 10 '17 23:05

Bogac


People also ask

Can we have multiple routes in Angular?

Angular Router supports multiple outlets in the same application. A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.

What is path in Angular routing?

Each route in this array is a JavaScript object that contains two properties. The first property, path , defines the URL path for the route. The second property, component , defines the component Angular should use for the corresponding path.

What is the difference between routing and navigation in Angular?

Angular provides extensive set of navigation feature to accommodate simple scenario to complex scenario. The process of defining navigation element and the corresponding view is called Routing. Angular provides a separate module, RouterModule to set up the navigation in the Angular application.

What is wildcard route in Angular?

What is Wildcard Route in Angular? The Wildcard Route is basically used in Angular Application to handle the invalid URLs. Whenever the user enter some invalid URL or if you have deleted some existing URL from your application, then by default 404 page not found error page is displayed.


2 Answers

If you need different routing per language as you describe in your comment you could have a dedicated routing module for each individual language. Then define in the angular-cli.json for each language a dedicated app with it's own main.ts and it's own AppModule, pulling in only the routing module required for the particular language.

  "apps": [
   {
      "root": "src",
      "name": "yourapp_FR",
...
      "main": "./app/yourapp_FR/main.ts",
...   
    },
   {
      "root": "src",
      "name": "yourapp_DE",
...
      "main": "./app/yourapp_DE/main.ts",
...   
    }
    ]

You then build for each language the app like this:

ng build --app yourapp_FR --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot

This way you set it up once and can build each time without commenting out anything. I do not have the full context. You say having routes per language is better for SEO. I do not understand this, but if you say so, OK. However I would not like dedicated routing for each language. This means a lot of redundancy and more maintenance.

like image 104
PeterFromCologne Avatar answered Oct 18 '22 22:10

PeterFromCologne


For the moment there seems to be no easy solution for this. I'll update if I find one.

Angular i18n people are working to integrate code level internationalization, maybe then.

Best solution I can come up with is to change routing module(s) in your code and routerLink attributes in templates and all links in other parts of your code for each language, then build your app for each language separately.

Not ideal at all.

UPDATE

As recommended by @estus, I've tried out Greentube/localize-router.

I wasn't happy to install dependencies like @ngx-translate/core and @ngx-translate/http-loader since I'm using Angular i18n implementation/tools and not ngx-translate.

It works till it hits a lazy-loaded module with child routes.

So if you don't have any lazy loaded module with children, localize-router is the way to go.

UPDATE

Lazy loaded modules are now supported in the latest version of localize-router.

Angular i18n will be supported once the programatic translations arrive.

like image 37
Bogac Avatar answered Oct 18 '22 21:10

Bogac