feat: i18n setup with ngx-translate

package.json

@@ -16,7 +16,10 @@
     "e2e": "yarn ng:e2e && yarn electron:e2e",
     "start": "del -f dist && npm-run-all -p ng:serve electron:serve",
     "build:dist": "del -f dist && yarn ng:build && yarn electron:build",
-    "build:copy": "cpy package.json dist/main/* dist/angular/* dist/build && cpy static ../dist/build --cwd=src --parents",
+    "build:copy:ng": "cpy '**/*' '../build' --cwd=dist/angular --parents",
+    "build:copy:static": "cpy 'static' '../dist/build' --cwd=src --parents",
+    "build:copy:electron": "cpy '**/*' '../build' --cwd=dist/main --parents && yarn build:copy:static",
+    "build:copy": "cpy package.json dist/build && yarn build:copy:ng && yarn build:copy:electron",
     "build": "yarn build:dist && yarn build:copy && cd dist/build && yarn --prod",
     "package": "yarn build && electron-builder"
   },
@@ -37,6 +40,8 @@
     "@angular/platform-browser": "~9.1.1",
     "@angular/platform-browser-dynamic": "~9.1.1",
     "@angular/router": "~9.1.1",
+    "@ngx-translate/core": "^12.1.2",
+    "@ngx-translate/http-loader": "^4.0.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

src/angular/app/app.module.ts

@@ -1,17 +1,34 @@
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MutiplesComponent } from './components/mutiples/mutiples.component';
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
 @NgModule({
   declarations: [AppComponent, MutiplesComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    HttpClientModule,
     ReactiveFormsModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    }),
     RouterModule.forRoot([{ path: '', component: MutiplesComponent }]),
   ],
   providers: [],

src/angular/app/components/mutiples/mutiples.component.html

@@ -1,21 +1,14 @@
 <div id="multiples">
   <div class="container">
-    <h2>Times table</h2>
+    <button (click)="translateIn('en')">EN</button>
+    <button (click)="translateIn('fr')">FR</button>
+    <h2>{{ 'MULTIPLES.TITLE' | translate }}</h2>
     <form [formGroup]="timesTableForm" (ngSubmit)="onSubmit()">
       <div class="form-group">
-        <input
+        <input type="number" class="form-control" formControlName="input" required />
-          type="number"
-          class="form-control"
-          formControlName="input"
-          required
-        />
       </div>
-      <button
+      <button type="submit" class="btn btn-success" [disabled]="!timesTableForm.valid">
-        type="submit"
+        {{ 'MULTIPLES.SUBMIT' | translate }}
-        class="btn btn-success"
-        [disabled]="!timesTableForm.valid"
-      >
-        SUBMIT
       </button>
     </form>
 
@@ -23,4 +16,4 @@
       {{ timesTableForm.value.input }} * {{ 1 + i }} = {{ multiple }}
     </h3>
   </div>
-</div>
+</div>

src/angular/app/components/mutiples/mutiples.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 import { ElectronIpcService } from 'angular/app/services/electron-ipc.service';
 import { WindowApiConst } from 'shared';
 
@@ -15,7 +16,10 @@ export class MutiplesComponent implements OnInit {
 
   multiples = [];
 
-  constructor(private electronIpc: ElectronIpcService) {}
+  constructor(
+    private electronIpc: ElectronIpcService,
+    private translate: TranslateService
+  ) {}
 
   ngOnInit(): void {
     // Specifying what to do with received data from main process
@@ -33,6 +37,10 @@ export class MutiplesComponent implements OnInit {
     this.onSubmit();
   }
 
+  translateIn(lang: string) {
+    this.translate.use(lang);
+  }
+
   onSubmit() {
     const intput = this.timesTableForm.value.input;
     this.electronIpc.send(WindowApiConst.MULTIPLES_INPUT, intput);

src/angular/assets/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "MULTIPLES": {
+    "TITLE": "Times table",
+    "SUBMIT": "SUBMIT"
+  }
+}

src/angular/assets/i18n/fr.json

@@ -0,0 +1,6 @@
+{
+  "MULTIPLES": {
+    "TITLE": "Table de multiplication",
+    "SUBMIT": "SOUMETTRE"
+  }
+}

yarn.lock

@@ -1148,6 +1148,18 @@
     rxjs "6.5.4"
     webpack-sources "1.4.3"
 
+"@ngx-translate/core@^12.1.2":
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-12.1.2.tgz#0c6f24249953a79cfc2d581b2cd1b5d6d338d9db"
+  integrity sha512-ZudJsqIxTKlLmPoqK8gJY3UpMGujR0Xm7HfXL6AR79yGRS23QqpjAhMfx4v5qUCcHMmQ9/78bW8QJLfp31c7vQ==
+
+"@ngx-translate/http-loader@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-4.0.0.tgz#8a555248ad4b7d513460fcec9da25b0447962f1d"
+  integrity sha512-x8LumqydWD7eX9yQTAVeoCM9gFUIGVTUjZqbxdAUavAA3qVnk9wCQux7iHLPXpydl8vyQmLoPQR+fFU+DUDOMA==
+  dependencies:
+    tslib "^1.9.0"
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"