From f17719c7e8d4c7798b299a6d500712f903ddda3e Mon Sep 17 00:00:00 2001 From: Amadou Ada DIENE Date: Wed, 29 Apr 2020 19:36:21 +0200 Subject: [PATCH] feat: i18n setup with ngx-translate --- package.json | 7 ++++++- src/angular/app/app.module.ts | 17 +++++++++++++++ .../mutiples/mutiples.component.html | 21 +++++++------------ .../components/mutiples/mutiples.component.ts | 10 ++++++++- src/angular/assets/i18n/en.json | 6 ++++++ src/angular/assets/i18n/fr.json | 6 ++++++ yarn.lock | 12 +++++++++++ 7 files changed, 63 insertions(+), 16 deletions(-) create mode 100644 src/angular/assets/i18n/en.json create mode 100644 src/angular/assets/i18n/fr.json diff --git a/package.json b/package.json index a437e94..56dea15 100644 --- a/package.json +++ b/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", diff --git a/src/angular/app/app.module.ts b/src/angular/app/app.module.ts index 4572b5f..3d6a1d1 100644 --- a/src/angular/app/app.module.ts +++ b/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: [], diff --git a/src/angular/app/components/mutiples/mutiples.component.html b/src/angular/app/components/mutiples/mutiples.component.html index c2a7dbf..ac35d8d 100644 --- a/src/angular/app/components/mutiples/mutiples.component.html +++ b/src/angular/app/components/mutiples/mutiples.component.html @@ -1,21 +1,14 @@
-

Times table

+ + +

{{ 'MULTIPLES.TITLE' | translate }}

- +
-
@@ -23,4 +16,4 @@ {{ timesTableForm.value.input }} * {{ 1 + i }} = {{ multiple }}
-
+ \ No newline at end of file diff --git a/src/angular/app/components/mutiples/mutiples.component.ts b/src/angular/app/components/mutiples/mutiples.component.ts index 351298f..7ac11a5 100644 --- a/src/angular/app/components/mutiples/mutiples.component.ts +++ b/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); diff --git a/src/angular/assets/i18n/en.json b/src/angular/assets/i18n/en.json new file mode 100644 index 0000000..6ec92de --- /dev/null +++ b/src/angular/assets/i18n/en.json @@ -0,0 +1,6 @@ +{ + "MULTIPLES": { + "TITLE": "Times table", + "SUBMIT": "SUBMIT" + } +} diff --git a/src/angular/assets/i18n/fr.json b/src/angular/assets/i18n/fr.json new file mode 100644 index 0000000..3aed014 --- /dev/null +++ b/src/angular/assets/i18n/fr.json @@ -0,0 +1,6 @@ +{ + "MULTIPLES": { + "TITLE": "Table de multiplication", + "SUBMIT": "SOUMETTRE" + } +} diff --git a/yarn.lock b/yarn.lock index dd9da04..1ccd544 100644 --- a/yarn.lock +++ b/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"