Localization

angular.json

@@ -16,6 +16,13 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "ru": "src/locales/messages.ru.xlf",
+          "uk": "src/locales/messages.uk.xlf"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -40,6 +47,12 @@
             "scripts": []
           },
           "configurations": {
+            "ru": {
+              "localize": ["ru"]
+            },
+            "uk": {
+              "localize": ["uk"]
+            },
             "production": {
               "budgets": [
                 {
@@ -75,6 +88,12 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
+            "ru": {
+              "browserTarget": "project-management:build:ru"
+            },
+            "uk": {
+              "browserTarget": "project-management:build:uk"
+            },
             "production": {
               "browserTarget": "project-management:build:production"
             },

package.json

@@ -4,12 +4,15 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --localize",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint",
     "lintfix": "ng lint -- --fix",
     "lint-check": "eslint ./",
+    "int:extract": "ng extract-i18n --output-path src/locales",
+    "int:ru": "ng serve --configuration=ru --open",
+    "int:uk": "ng serve --configuration=uk --open",
     "pre": "prettier --write \"src/**/*.{js,jsx,scss,css,json,html}\"",
     "prettier-check": "prettier --check ./src"
   },
@@ -44,6 +47,7 @@
     "@angular-eslint/template-parser": "13.2.1",
     "@angular/cli": "~13.3.0",
     "@angular/compiler-cli": "~13.3.0",
+    "@angular/localize": "^13.3.4",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "5.17.0",

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';
+import { NZ_I18N, en_US, ru_RU, uk_UA } from 'ng-zorro-antd/i18n';
 import { registerLocaleData } from '@angular/common';
 import en from '@angular/common/locales/en';
 import { FormsModule } from '@angular/forms';
@@ -34,7 +34,21 @@ registerLocaleData(en);
     DialogModule,
   ],
   providers: [
-    { provide: NZ_I18N, useValue: en_US },
+    {
+      provide: NZ_I18N,
+      useFactory: (localId: string) => {
+        switch (localId) {
+          case 'en':
+            return en_US;
+          case 'ru':
+            return ru_RU;
+          case 'uk':
+            return uk_UA;
+          default:
+            return en_US;
+        }
+      },
+    },
     {
       provide: HTTP_INTERCEPTORS,
       useClass: ErrorIntercept,

src/app/auth/auth.component.html

@@ -1,10 +1,10 @@
 <div class="login-page">
   <div class="login-wrapper">
     <nz-tabset class="login-tabs">
-      <nz-tab nzTitle="Sign in">
+      <nz-tab i18n-nzTitle nzTitle="Sign in">
         <form class="login-form" [formGroup]="form" novalidate (ngSubmit)="submit()">
           <label class="label">
-            Login:
+            <span i18n>Login:</span>
             <input
               type="text"
               placeholder="your login"
@@ -25,8 +25,9 @@
             </div>
           </label>
           <label class="label">
-            Password:
+            <span i18n>Password:</span>
             <input
+              i18n-placeholder
               [type]="showPassSighIn ? 'text' : 'password'"
               placeholder="your password"
               #myPassword
@@ -46,6 +47,7 @@
               <i nz-icon nzType="eye" nzTheme="outline"></i>
             </div>
             <div
+              i18n
               class="alert alert-danger"
               *ngIf="form.controls['userPassword'].errors?.['required']
                 && form.controls['userPassword'].touched"
@@ -56,11 +58,12 @@
           <button class="login-button" nzType="primary" nz-button>Sign in</button>
         </form>
       </nz-tab>
-      <nz-tab nzTitle="Sign up">
+      <nz-tab i18n-nzTitle nzTitle="Sign up">
         <form class="login-form" [formGroup]="formSignUp" novalidate (ngSubmit)="submitSignUp()">
           <label class="label">
             Name:
             <input
+              i18n-placeholder
               type="text"
               placeholder="your name"
               #mySName
@@ -73,6 +76,7 @@
               }"
             />
             <div
+              i18n
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userName'].errors?.['required'] && formSignUp.controls['userName'].touched"
             >
@@ -82,6 +86,7 @@
           <label class="label">
             Login:
             <input
+              i18n-placeholder
               type="text"
               placeholder="your login"
               #mySLogin
@@ -94,6 +99,7 @@
               }"
             />
             <div
+              i18n
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userLogin'].errors?.['required'] && formSignUp.controls['userLogin'].touched"
             >
@@ -103,6 +109,7 @@
           <label class="label">
             Password:
             <input
+              i18n-placeholder
               [type]="showPassSighUp ? 'text' : 'password'"
               placeholder="your password"
               #mySPassword
@@ -123,21 +130,23 @@
               <i nz-icon nzType="eye" nzTheme="outline"></i>
             </div>
             <div
+              i18n
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userNewPassword'].errors?.['required']
                 && formSignUp.controls['userNewPassword'].touched"
             >
               Please enter a password
             </div>
             <div
+              i18n
               class="alert alert-danger"
               *ngIf="formSignUp.controls['userNewPassword'].errors?.['pattern']
                 && formSignUp.controls['userNewPassword'].touched"
             >
               Your password isn't strong enough
             </div>
           </label>
-          <button class="login-button" nzType="primary" nz-button>Sign up</button>
+          <button i18n class="login-button" nzType="primary" nz-button>Sign up</button>
         </form>
       </nz-tab>
     </nz-tabset>