I'm learning Angular v.5 + Express, and I want to translate application to 2 languages using Angular i18n tool. I want my url to contain the language I'm using as follows: mysite/en/controller/...
My idea is to use AOT piler, according to the guideline. Then, serve corresponding folder by Express. So, as a result I will have 2 built versions of my application, each in its own directory.
The problem is that I need to define base url in index.html file
<head>
<meta charset="utf-8">
<title>Title</title>
<base href="/en/">
...
</head>
And the URL depends on the current language. What I expected is that I can do something like
<base i18n href="/en/">
and then specify alternative path inside my translation file. However, this does not work. Am I doing something wrong? What is correct way to use i18n with AngularJS5 with such URL pattern?
I'm learning Angular v.5 + Express, and I want to translate application to 2 languages using Angular i18n tool. I want my url to contain the language I'm using as follows: mysite./en/controller/...
My idea is to use AOT piler, according to the guideline. Then, serve corresponding folder by Express. So, as a result I will have 2 built versions of my application, each in its own directory.
The problem is that I need to define base url in index.html file
<head>
<meta charset="utf-8">
<title>Title</title>
<base href="/en/">
...
</head>
And the URL depends on the current language. What I expected is that I can do something like
<base i18n href="/en/">
and then specify alternative path inside my translation file. However, this does not work. Am I doing something wrong? What is correct way to use i18n with AngularJS5 with such URL pattern?
Share Improve this question edited Nov 29, 2017 at 21:48 Ivar 6,86812 gold badges56 silver badges67 bronze badges asked Nov 29, 2017 at 21:09 alvisalvis 3492 silver badges13 bronze badges 1- 1 Hello, just for you information, if you speak about v2+ you have to say Angular, olders versions are called AngularJS – Leasye Commented Nov 29, 2017 at 21:34
3 Answers
Reset to default 3A nice solution could be to use ngx-translate (which is the same than angular-translate for angularJS.
Ngx-translate have a plugin for you need :
Localize Router by @meeroslav: An implementation of routes localization for Angular. If you need localized urls (for example /fr/page and /en/page).
Ngx-translate link : https://github./ngx-translate/core
Here is the plugin link : https://github./Greentube/localize-router
Do you have to have the language in the url? If you removed it, you could just set your base url to /. In that case, your express server would detect the user's language and serve up the correct asset. So if /controllers/myController.js is requested, and the user's language is spanish, the server would return the file from /es_ES/controllers/myController.js.
PS: I believe the AOT piler only works with angular 2+, so I'm assuming you're actually using Angular instead of AngularJS.
You don't need to change base href in "index.html", you can define baseHref in "angular.json" build configuration, e.g. "baseHref": "/fr/".
Refer Angular I18N document https://angular.io/guide/i18n#build-for-multiple-locales