angular i18n
Recently I tried to set up internationalization and Server Side Rendering (SSR) together with Angular. After digging for days and nearly becoming crazy trying to make something actually user and DEV friendly, I wanted to share my experience and hopefully help people in the same situation.
最近，我尝试与Angular一起建立国际化和服务器端渲染(SSR)。 经过数天的探索并且几乎疯狂起来，试图使某些东西真正成为用户和DEV的友好对象，我想分享我的经验，并希望能帮助处于相同情况的人们。
Let’s set the goals here. We want to have a fully SSR application, with multiple pages, the ability to change language at runtime and last but not least, a friendly way for developers to do their job without crazy architecture. You can find the end result here.
让我们在这里设定目标。 我们希望拥有一个具有多个页面的完全SSR应用程序，并能够在运行时更改语言，并且最后但并非最不重要的一点是，开发人员可以轻松地完成工作而无需疯狂的架构。 您可以在此处找到最终结果。
Prerequisite: You need to have Node and Angular CLI 9 installed on your machine.
先决条件 ：您需要在计算机上安装Node和Angular CLI 9。
EDIT: In the first version of this article, some people raised the issue that the view source HTML was not translated and will cause problems to the web crawlers. This new version takes now care of this issue.
编辑 ： 在本文的第一个版本中，一些人提出了以下问题：视图源HTML未翻译，这将对Web爬网程序造成问题。 此新版本现在可以解决此问题。
从CLI开始 (Start with the CLI)
The angular CLI provides many tools that are going to help us in our journey. Let’s create a new application and set it up.
角度CLI提供了许多工具，可以在我们的旅途中为我们提供帮助。 让我们创建一个新的应用程序并进行设置。
We have accomplished two things here. First, created an app with the CLI tool and then add configuration for NgUniversal.
我们在这里完成了两件事。 首先，使用CLI工具创建一个应用，然后为NgUniversal添加配置。
You can see that there are some new files compared to a regular Angular CLI app:
您可以看到，与常规的Angular CLI应用相比，有一些新文件：
The main focus is the server.ts file. For those familiar with Express on Node will recognize that this file mostly acts as a web server for static files. The Angular CLI did all the set up for us and added a few new commands in package.json:
主要焦点是server.ts文件。 对于那些熟悉Express on Node的人来说，它将认识到此文件主要充当静态文件的Web服务器。 Angular CLI为我们完成了所有设置，并在package.json中添加了一些新命令：
The dev:ssr command is the equivalent ng serve for an SSR application. The build:ssr command builds your app for production and serve:ssr starts the express server that serves your production application. The last one, prerender builds your application not only as if it was in production, but also prerenders the pages for optimization.
dev的：SSR命令是等效纳克服务用于SSR应用。 build：ssr命令可构建用于生产的应用程序并服务：ssr启动为生产应用程序提供服务的Express服务器。 最后一个， prerender不仅可以像在生产环境中那样构建应用程序，还可以预编译页面以进行优化。
Let’s start by running the first command dev:ssr.
让我们从运行第一个命令dev：ssr开始。
Now let’s add another page /first-page to set up the ground for the rest of the article. I will skip details, as this part is not the purpose of this article and everything is the same as in a regular application. If you need help with this part you can refer to the angular documentation. Here is what we should have:
现在，让我们添加另一页/ first-page来为本文的其余部分奠定基础。 我将跳过细节，因为这不是本文的目的，并且所有内容与常规应用程序中的相同。 如果您需要有关此部分的帮助，可以参考角度文档 。 这是我们应该拥有的：
And on localhost:
并在localhost上 ：
All the basics of the SSR application are ready. It’s time to tackle i18n!
SSR应用程序的所有基础知识都已准备就绪。 现在该解决i18n了！
i18n在Angular (i18n in Angular)
Let’s say it straight, the i18n implementation in Angular is painful. It’s been designed to be highly optimized (and it is), but it is absolutely not developer-friendly. There is an excellent library ngx-translate that tackles internalization with a different approach. It is less optimized but easier to integrate. However, I found that this library did not work well with Angular Universal (version 9 is the latest at the moment this article is written). In addition, it is still not clear if ngx-translate is here for the long run (see here). This is why we are going to focus on the i18n tool provided by the Angular team.
直说吧，在Angular中实现i18n非常痛苦。 它被设计为经过高度优化(的确是这样)，但是绝对不适合开发人员。 有一个出色的库ngx-translate可以用不同的方法处理内部化。 它的优化程度较低，但易于集成。 但是，我发现该库不能与Angular Universal一起使用(版本9是撰写本文时的最新版本)。 此外，从长远来看，是否仍在使用ngx-translate尚不清楚(请参见此处 )。 这就是为什么我们将专注于Angular团队提供的i18n工具的原因 。
First, let’s add it with the cli:
首先，让我们添加cli：
You should see a few questions being prompted to you. Choose what suits you best. Here, we choose to have English as primary language and French as additional one:
您应该会看到提示您的几个问题。 选择最适合您的东西。 在这里，我们选择将英语作为主要语言，将法语作为附加语言：
The package ngx-i8nsupport/tooling provides you some tooling to help you with translation. The most useful one will be the xliffmerge tool that merges new translations automatically into their files without overriding your past work.
软件包ngx-i8nsupport / tooling提供了一些工具来帮助您进行翻译。 最有用的工具是xliffmerge工具，该工具可将新翻译自动合并到其文件中，而不会覆盖您过去的工作。
Let’s add some translations to our app with the i18n attribute (see docs for more details).
让我们使用i18n属性向我们的应用添加一些翻译(有关更多详细信息，请参阅文档 )。
Now it’s time to extract them into translation files. You might have noticed that your package.json has a new script ‘extract-i18n’. We need to modify it to match configuration from angular.json.
现在是时候将它们提取到翻译文件中了。 您可能已经注意到package.json中有一个新脚本' extract-i18n '。 我们需要对其进行修改以匹配angular.json的配置。
You should see the folder src/i18n created:
您应该看到已创建文件夹src / i18n：
Here what it should look like:
这里看起来应该是这样的：
The source is messages.xlf, the messages.en.xlf is already translated (notice <target state=”final”>) and we just need to add the translation for French into messages.fr.xlf (notice <target state=”new”> indicating you need to translate that part).
来源是messages.xlf，messages.en.xlf已经翻译过(notice <target state =“ final”>)，我们只需要将法语的翻译添加到messages.fr.xlf中(notice <target state =”新”>，表示您需要翻译该部分)。
That’s it for the translation. All stones are set, now let’s tackle the last and most interesting part.
翻译就是这样。 所有的石头都摆好了，现在让我们解决最后一个最有趣的部分。
服务多个语言环境 (Serving multiple locales)
To build our app with multiple locales, we can use the localize argument in the command line. A better solution in our use case is to set it in stone in the angular.json file. To do that, we can just add it to the build options section. We also need to add an i18n section indicating ‘en’ as source language, where to find the French translation, and set the proper baseHref for it (don’t miss that step, it is key to serving the proper translation).
要构建具有多个语言环境的应用，我们可以在命令行中使用localize参数。 在我们的用例中，更好的解决方案是将其设置在angular.json文件中。 为此，我们可以将其添加到构建选项部分。 我们还需要添加一个i18n部分，以“ en”作为源语言，在哪里可以找到法语翻译，并为其设置适当的baseHref(不要错过这一步骤，这是提供适当翻译的关键)。
After running the build command this is what we should have:
运行build命令之后，这是我们应该拥有的：
Now let’s make the server.ts file distributing the proper version of our builds:
现在，让server.ts文件分发我们构建的正确版本：
The first step is to add the lang argument into the app method. This argument is used to point to the proper dist folder and provide the proper LOCALE_ID in the app. The second step is in the run method. Basically, every language has its own express instance. These are going to be executed by a master express instance. When the baseHref is ‘fr’, we redirect to the French instance. When it is ‘en’ or ‘/’, we redirect to the English instance. After running the serve command here is what you should see:
第一步是将lang参数添加到app方法中。 此参数用于指向正确的dist文件夹，并在应用程序中提供正确的LOCALE_ID 。 第二步是运行方法。 基本上，每种语言都有其自己的表达实例。 这些将由主Express实例执行。 当baseHref为' fr '时，我们重定向到法国实例。 当它为' en '或'/'时，我们将重定向到英语实例。 运行serve命令后，您将看到以下内容：
That’s it we have both versions of our app running at the same time! The only drawback of this method is that the app is reloaded when you switch language. Other than that there is no issue switching language at runtime!
就是这样，我们同时运行了两个版本的应用程序！ 此方法的唯一缺点是切换语言时会重新加载应用程序。 除此之外，运行时切换语言没有问题！
翻译视图源 (Translating the view-source)
If you type in the URL view-source:http://localhost:4200/fr/, you’ll notice that the HTML file is not translated. This will cause an issue for web crawlers to find our translated pages. It’s because we did not localize our server build. However, when we do so, we end up with two server bundles instead of one! It means we cannot use our server.ts to serve both languages…
如果键入URL view-source：http：// localhost：4200 / fr / ，则会注意到HTML文件未翻译。 这将导致网络爬虫无法找到我们的翻译页面。 这是因为我们没有本地化服务器版本。 但是，这样做时，最终会得到两个服务器捆绑包，而不是一个！ 这意味着我们无法使用server.ts来提供两种语言…
We want to keep hot reload abilities and changing language on the fly when developing. So we will keep the things identical as previously for development mode and just add a few extra steps in production.
我们希望在开发时保持热重装能力并即时更改语言。 因此，我们将保持与以前开发模式相同的功能，仅在生产中增加一些额外步骤。
First, we will make our server.ts actually run only in dev mode.
首先，我们将使server.ts实际上仅在开发模式下运行。
We will also create a proxy-server.js file only used in production:
我们还将创建仅在生产中使用的proxy-server.js文件：
This file will fetch the French and English bundles and serve them when needed.
该文件将获取法语和英语捆绑软件，并在需要时提供它们。
The last step is a slight update of the configuration. We will need to localize the production build of the server and add the proxy-server.js to the dist folder.
最后一步是配置的轻微更新。 我们将需要本地化服务器的生产版本，并将proxy-server.js添加到dist文件夹。
And in package.json let’s update the build:ssr and serve:ssr commands (you’ll need to install the cpx package as dev dependency):
在package.json中，让我们更新build：ssr和serve：ssr命令(您需要将cpx软件包安装为dev依赖项)：
With can now have a fully localized build:
现在可以使用完全本地化的构建：
And a translated view-source:
以及翻译后的视图源：
预渲染命令 (Prerender command)
A quick note about the prerender command is a very useful tool for production. It, as its name indicates, pretender the HTML pages of your app for you so they can be served faster. The Angular CLI generates automatically this command for you. To do so, just execute npm run prerender in the command line!
关于prerender命令的快速说明是用于生产的非常有用的工具。 顾名思义，它可以为您伪装应用程序HTML页面，从而可以更快地提供它们。 Angular CLI自动为您生成此命令。 为此，只需在命令行中执行npm run prerender即可 ！
最后的话 (Final words)
We now have a friendly translated SSR application with Angular where we can change the language on the fly without (too many) extra-steps. Hopefully, it will help other developers to code more easily without such a setup!
现在，我们有了一个使用Angular进行了友好翻译的SSR应用程序，在此我们可以即时更改语言，而无需(太多)额外的步骤。 希望它可以帮助其他开发人员在没有这种设置的情况下更轻松地编码！
Thank you for continuing to read until the end and I hope it will help some people out there! Feel free to leave feedback, I will be glad to answer them. Happy hacking!
感谢您继续阅读直至结尾，希望对您有所帮助！ 随时留下反馈，我很乐意回答。 骇客入侵！
普通英语JavaScript (JavaScript In Plain English)
Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!
喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道 ，以获得更多类似的内容！
angular i18n
2053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
