Geek Answers Handbook

Angular Routing. Can different path lines be used for different languages?

I am making an i18n Angular application while it works fine.

However, I have the same route lines for different languages, which is not better for SEO.

Is it possible that the properties of the "path" of the Routes array are different for each language?

Example:

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 also possible to define a appRoutesFR: Routes , if so, how can I use it? Should I embed LOCALE_ID in the routing module? If so, how?

+5
source share
2 answers

If you need other routing in one language, as you describe in your comment, you may have a dedicated routing module for each individual language. Then define in angular-cli.json for each language a dedicated application with its own main.ts and its own AppModule, pulling only the routing module needed for a 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", ... } ]

Then you create an application for each language as follows:

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

This way you install it once and can create it every time without commenting on anything. I do not have a full context. You say that routes for each language are better for SEO. I don’t understand this, but if you say so, good. However, I would not want dedicated routing for each language. This means a lot of redundancy and extra maintenance.

+2
source

At the moment, there seems to be no easy solution. I will update if I find it.

Angular i18n people work to integrate code-level internationalization, perhaps then.

The best solution I can come up with is to change the routing modules in your code and the routerLink attributes in the templates and all the links in other parts of your code for each language, and then create an application for each language separately.

Not perfect at all.

UPDATE

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

I was not happy to install dependencies like @ngx-translate/core and @ngx-translate/http-loader , since I am using Angular i18n implementation / tools, not ngx-translate.

It works until it reaches 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 after the arrival of program translations.

+1
source

More articles:


All Articles