feat: support i18n

fixes #4

angular.json

@@ -18,6 +18,8 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/ReservationClient/browser",
+            "localize": ["zh-CN"],
+            "i18nMissingTranslation": "error",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
@@ -45,12 +47,12 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
+              "localize": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -60,6 +62,15 @@
               ],
               "serviceWorker": true,
               "ngswConfigPath": "ngsw-config.json"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "localize": ["zh-CN"]
+            },
+            "en": {
+              "localize": ["en"]
             }
           }
         },
@@ -71,6 +82,12 @@
           "configurations": {
             "production": {
               "buildTarget": "ReservationClient:build:production"
+            },
+            "development":{
+              "buildTarget": "ReservationClient:build:development"
+            },
+            "en": {
+              "buildTarget": "ReservationClient:build:development,en"
             }
           }
         },
@@ -185,6 +202,14 @@
           },
           "defaultConfiguration": "production"
         }
+      },
+      "i18n": {
+        "sourceLocale": "zh-CN",
+        "locales": {
+          "en": {
+            "translation": "src/locale/en.json"
+          }
+        }
       }
     }
   },

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --aot",
+    "build": "ng build --aot --localize",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -55,4 +55,4 @@
     "tslint": "~6.1.0",
     "typescript": "~5.2.2"
   }
-}
+}

src/app/about/about.component.html

@@ -1,28 +1,27 @@
 <div>
     <div>
-    <h2>关于 OpenReservation</h2>
-    <p>OpenReservation，起初的设计和开发是因为学校活动室预约流程希望从之前繁琐低效的完全线下预约
+    <h2 i18n>关于 OpenReservation</h2>
+    <p i18n>OpenReservation，起初的设计和开发是因为学校活动室预约流程希望从之前繁琐低效的完全线下预约
     修改为线上预约+线下盖章审批的方式来预约学校的活动室。</p>
     <p>目前使用 ASP.NET Core 开发, 使用 Docker + k8s + nginx 部署，</p>
     <p>项目地址：<a href="https://github.com/OpenReservation/ReservationServer">https://github.com/OpenReservation/ReservationServer</a></p>
     <p>演示地址：<a href="https://reservation.weihanli.xyz">https://reservation.weihanli.xyz</a></p>
     <p>新版演示地址：<a href="https://reservation-client.weihanli.xyz">https://reservation-client.weihanli.xyz</a></p>
-    <p>演示小程序：<img src="https://raw.githubusercontent.com/OpenReservation/ReservationServer/dev/images/wxAppCode.jpg" /></p>
     <p>后台登录地址： <a href="https://reservation.weihanli.xyz/Admin/Home/Index">https://reservation.weihanli.xyz/Admin/Home/Index</a></p>
     <p>后台登录账号：</p>
     <p>管理员用户名: admin 密码: Admin&#64;888 <br/>
     普通用户： Alice 密码：Test1234</p>
     <p>管理员有更多的权限，可以设置更多系统相关的配置</p>
 
-    <h2>关于技术</h2>
+    <h2 i18n>关于技术</h2>
     <p>使用的技术演化：</p>
     <p>ASP.NET WebForm =&gt; ASP.NET MVC =&gt; ASP.NET Core</p>
     <p>部署方式：</p>
     <p>IIS =&gt; <code>Docker</code>+<code>nginx</code> =&gt; <code>Docker</code>+<code>kubernetes</code>+<code>nginx</code></p>
     <p>CI/CD:</p>
     <p>appveyor =&gt; travis =&gt; Azure Pipeline</p>
 
-    <h2>联系方式</h2>
+    <h2 i18n>联系方式</h2>
     <p>
       联系电话：021-32145689 <br />
       联系邮箱：weihanli&#64;outlook.com <br />

src/app/account/auth-callback/auth-callback.component.html

@@ -1 +1 @@
-<p> login loading ...</p>
+<p i18n="@@loginLoadingTip"> login loading ...</p>

src/app/account/login/login.component.html

@@ -1 +1 @@
-<p> login loading... </p>
+<p i18n="@@loginLoadingTip"> login loading... </p>

src/app/account/my-reservation/my-reservation.component.html

@@ -12,10 +12,10 @@
                 <button mat-flat-button color="warn" (click)="cancel(element['ReservationId'])">取消</button>
               </ng-template>
               <ng-template #elseTemplate>
-                <span *ngIf="element['ReservationStatus'] === 0">待审核</span>
-                <span *ngIf="element['ReservationStatus'] === 1">已通过审核</span>
-                <span *ngIf="element['ReservationStatus'] === 2">审核未通过</span>
-                <span *ngIf="element['ReservationStatus'] === 4">已取消</span>
+                <span i18n *ngIf="element['ReservationStatus'] === 0">待审核</span>
+                <span i18n *ngIf="element['ReservationStatus'] === 1">已通过审核</span>
+                <span i18n *ngIf="element['ReservationStatus'] === 2">审核未通过</span>
+                <span i18n *ngIf="element['ReservationStatus'] === 4">已取消</span>
               </ng-template>
             </div>
           </td>
@@ -25,4 +25,4 @@
     </table>
     <mat-paginator showFirstLastButtons (page)="onPageEvent($event)" [length]="total" [pageIndex]="pageNumber-1" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]">
     </mat-paginator>
-  </div>
+  </div>

src/app/shared/pipes/safe-html.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
+import { Pipe, PipeTransform } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 
 @Pipe({
@@ -9,4 +9,4 @@ export class SanitizeHtmlPipe implements PipeTransform {
     transform(value: any): any {
         return this.sanitizer.bypassSecurityTrustHtml(value);
     }
-}
+}

src/locale/en.json

@@ -0,0 +1,14 @@
+{
+  "locale": "en",
+  "translations": {
+    "648384793834741905": "About OpenReservation",
+    "9089094616376380627": "OpenReservation, open-source reservation system",
+    "5730716019192754509": "About tech",
+    "8313170572122796394": "Contact",
+    "loginLoadingTip": " login loading ...",
+    "7361433381848203362": "UnReviewed",
+    "417411916246438223": "Reserved",
+    "1943031296081914182": "Rejected",
+    "8271850091785840599": "Cancelled"
+  }
+}

src/locale/zh.json

@@ -0,0 +1,14 @@
+{
+  "locale": "zh-CN",
+  "translations": {
+    "648384793834741905": "关于 OpenReservation",
+    "9089094616376380627": "OpenReservation，起初的设计和开发是因为学校活动室预约流程希望从之前繁琐低效的完全线下预约 修改为线上预约+线下盖章审批的方式来预约学校的活动室。",
+    "5730716019192754509": "关于技术",
+    "8313170572122796394": "联系方式",
+    "loginLoadingTip": " 正在登录 ...",
+    "7361433381848203362": "待审核",
+    "417411916246438223": "已通过审核",
+    "1943031296081914182": "审核未通过",
+    "8271850091785840599": "已取消"
+  }
+}