开发适用于i18n的Angular应用程序的开发环境
首先
本文将介绍在开发以下结构的Angular应用程序时如何搭建本地开发环境。
Angular公式のi18n機能を使ってi18nを実現する
最終的なビルド生成物はAOTビルド後にサーバーまたはS3などの静的ファイルホスティングサービスから配信する
**/en/ **/ja/ などのアクセス先のパスを変化させることによって言語切替が可能
アプリケーションのUI上から言語選択を行う機能の動作確認をローカルで行う必要がある
环境
$ ng -v
Angular CLI: 6.1.5
Node: 9.11.1
OS: darwin x64
Angular: 6.1.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.7.5
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular/cli 6.1.5
@ngtools/webpack 6.1.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.2.2
typescript 2.7.2
webpack 4.9.2
仓库
以下是目前的解释结果应用到以下示例项目中：
https://github.com/daikiojm/angular-v6-i18n-sample
创建原型
这次的目的是说明开发环境，但是如果没有一个应用程序作为对象，就开始不了。因此，我们将使用Angular CLI快速创建一个示例项目。我们将创建一个简单的项目，其中包含由ng new创建的AppComponent的内容进行i18n。
首先，创建项目。
$ ng new angular-v6-i18n-sample
我们将在模板中的要翻译的部分添加i18n属性。
除了这种方法，还可以为每个地方添加自定义ID，但在这次中，我们最简单地添加i18n属性来指示要翻译的部分。
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
- <h1>
+ <h1 i18n>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
-<h2>Here are some links to help you start: </h2>
+<h2 i18n>Here are some links to help you start: </h2>
<ul>
<li>
- <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+ <h2><a i18n target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
- <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+ <h2><a i18n target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
- <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+ <h2><a i18n target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
创建消息文件
使用Angular CLI的ng xi18n命令来创建资源文件。
这里我们指定了以**.ja.xlf文件名和扩展名创建于/locale/文件夹下的默认en。
ng xi18n --i18n-format=xlf --out-file locale/messages.ja.xlf
当创建成功后，您可以确认文件中已经创建了以下内容。
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="1e9a15da9ecb3574be8b466c285ed4aca1d89e4b" datatype="html">
<source>
Welcome to <x id="INTERPOLATION" equiv-text="{{ title }}"/>!
</source>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">3</context>
</context-group>
</trans-unit>
<trans-unit id="54f29f9a6da150fc7c4fcd0b7e6d9a1b0314fd35" datatype="html">
<source>Here are some links to help you start: </source>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">8</context>
</context-group>
</trans-unit>
...
在上述文件中，描述了每个位置附加了i18n属性的映射以及其标签中包含的消息。
在该文件的**下方，将作为**的翻译目标消息进行描述。
@@ -6,6 +6,7 @@
<source>
Welcome to <x id="INTERPOLATION" equiv-text="{{ title }}"/>!
</source>
+ <target>ようこそ</target>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">3</context>
@@ -13,6 +14,7 @@
</trans-unit>
<trans-unit id="54f29f9a6da150fc7c4fcd0b7e6d9a1b0314fd35" datatype="html">
<source>Here are some links to help you start: </source>
+ <target>いい感じのいい感じのリンク一覧:</target>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">8</context>
@@ -20,6 +22,7 @@
</trans-unit>
<trans-unit id="170b2bb80cfeeaf71c71cd4b56d240fdda4dfc0b" datatype="html">
<source>Tour of Heroes</source>
+ <target>公式チュートリアル</target>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">11</context>
@@ -27,6 +30,7 @@
</trans-unit>
<trans-unit id="4446b939821a1c94d99d8f88ebf5c67844d48d08" datatype="html">
<source>CLI Documentation</source>
+ <target>CLI ドキュメント</target>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">14</context>
@@ -34,6 +38,7 @@
</trans-unit>
<trans-unit id="f7b003c76057ba9ff6d99232971f826d015eaf54" datatype="html">
<source>Angular blog</source>
+ <target>Angular ブログ</target>
<context-group purpose="location">
<context context-type="sourcefile">app/app.component.html</context>
<context context-type="linenumber">17</context>
到目前为止，完成了i18n的基本步骤。
构建设置
在 AOT 构建期通过指定区域设置进行国际化支持时，通常会采用将按区域设置构建的应用程序分割成不同路径，并进行语言切换的模式。下面是一个示意图：
在这种情况下，最终生成的构建文件应具有以下文件结构。
（生成两个在其他语言中构建的应用程序的图像）
dist/
└── app-name
├── en
│ ├── 3rdpartylicenses.txt
│ ├── favicon.ico
│ ├── index.html
│ ├── main.js
│ ├── polyfills.js
│ ├── runtime.js
│ ├── styles.js
│ └── vendor.js
└── ja
├── 3rdpartylicenses.txt
├── favicon.ico
├── index.html
├── main.js
├── polyfills.js
├── runtime.js
├── styles.js
└── vendor.js
代理服务器设置
为了在本地同时启动两个开发服务器，并能够通过相同的端口访问它们，需要进行如下代理设置。
首先，在项目的根目录中创建一个名为 proxy.conf.json 的文件，内容如下：
{
"/ja": {
"target": "http://localhost:4300",
"secure": false
}
}
在这里，Angular CLI的代理设置通常用于将请求代理到后端API，但我们在这里使用它来链接到通过不同路径进行ng serve的页面。
建立设置
在angular.json文件中，我们将记录每种语言的构建设置。
首先，在build.configurations中，根据production的设置，添加每种语言的额外配置。
...
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"en": {
...
"outputPath": "dist/en",
"baseHref": "/en/"
},
"ja": {
...
"outputPath": "dist/ja",
"baseHref": "/ja/",
"i18nFile": "src/locale/messages.ja.xlf",
"i18nFormat": "xlf",
"i18nLocale": "ja"
}
...
-
- outputPath
ビルド生成物の出力先ディレクトリ(上で挙げたディレクトリ構成になるように設定)
baseHref
HTMLのを指定する
i18nFile
前の手順で作成したリソースファイルを指定
i18nFormat
リソースファイルのファイルフォーマットを指定
i18nLocale
ロケールを指定
当设置被应用时，将分别指定ng serve –configuration=en和ng serve –configuration=ja来执行。
另外，还要在serve的配置中添加相同的设置。
"configurations": {
"production": {
"browserTarget": "angular-v6-i18n-sample:build:production"
},
"en": {
"browserTarget": "angular-v6-i18n-sample:build:en",
"baseHref": "/en/"
},
"ja": {
"browserTarget": "angular-v6-i18n-sample:build:ja",
"baseHref": "/ja/"
}
}
运行和构建命令
基于上述设置，我已经配置了npm script如下。
{
"name": "angular-v6-i18n-sample",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:en": "ng serve --configuration=en --proxy-config proxy.conf.json",
"start:ja": "ng serve --configuration=ja --port 4300",
"build": "npm run build:en && npm run build:ja",
"build:en": "ng build --configuration=en",
"build:ja": "ng build --configuration=ja",
...
},
...
确认
在本地开发时，启动方式如下。
请在两个不同的终端中分别运行npm run start：en和npm run start：ja。
在这种情况下，当访问http://localhost:4200/en时，应该是英文，当访问http://localhost:4200/ja时，应该是日文。
现在，我们可以在本地进行通过链接进行语言切换的测试等。
至于部署到实际环境，只需在执行上述设置的构建脚本后，将dist文件夹上传即可。如果有机会的话，我也希望能写一篇文章。
