最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular localized base URL - Stack Overflow

programmeradmin8浏览0评论

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
Add a ment  | 

3 Answers 3

Reset to default 3

A 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

发布评论

评论列表(0)

  1. 暂无评论