From 4983a1d237649ea38f970e09ce3009a7f53ac0f3 Mon Sep 17 00:00:00 2001 From: sandre Date: Thu, 15 Jan 2026 10:42:30 +0100 Subject: [PATCH] Tentative pour faire fonctionner Ngx-translate --- Front/skydivelogs-app/package-lock.json | 39 +++++++-------- Front/skydivelogs-app/package.json | 6 +-- .../skydivelogs-app/src/app/app.component.ts | 8 ++- Front/skydivelogs-app/src/app/app.config.ts | 21 ++++++-- .../create-user/create-user.component.html | 20 ++++---- .../app/create-user/create-user.component.ts | 11 ++-- .../app/login-user/login-user.component.ts | 5 +- .../src/app/login/login.component.html | 50 +++++++++++++++---- .../src/app/login/login.component.ts | 9 ++-- 9 files changed, 113 insertions(+), 56 deletions(-) diff --git a/Front/skydivelogs-app/package-lock.json b/Front/skydivelogs-app/package-lock.json index f71eeb5..23ece89 100644 --- a/Front/skydivelogs-app/package-lock.json +++ b/Front/skydivelogs-app/package-lock.json @@ -19,8 +19,8 @@ "@angular/platform-browser": "^19.2.6", "@angular/platform-browser-dynamic": "^19.2.6", "@angular/router": "^19.2.6", - "@ngx-translate/core": "^15.0.0", - "@ngx-translate/http-loader": "^8.0.0", + "@ngx-translate/core": "^17.0.0", + "@ngx-translate/http-loader": "^17.0.0", "chart.js": "^4.3.0", "ng2-charts": "^8.0.0", "rxjs": "~7.8.0", @@ -3994,32 +3994,29 @@ } }, "node_modules/@ngx-translate/core": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-15.0.0.tgz", - "integrity": "sha512-Am5uiuR0bOOxyoercDnAA3rJVizo4RRqJHo8N3RqJ+XfzVP/I845yEnMADykOHvM6HkVm4SZSnJBOiz0Anx5BA==", - "license": "SEE LICENSE IN LICENSE", - "engines": { - "node": "^16.13.0 || >=18.10.0" + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz", + "integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": ">=16.0.0", - "@angular/core": ">=16.0.0", - "rxjs": "^6.5.5 || ^7.4.0" + "@angular/common": ">=16", + "@angular/core": ">=16" } }, "node_modules/@ngx-translate/http-loader": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-8.0.0.tgz", - "integrity": "sha512-SFMsdUcmHF5OdZkL1CHEoSAwbP5EbAOPTLLboOCRRoOg21P4GJx+51jxGdJeGve6LSKLf4Pay7BkTwmE6vxYlg==", - "license": "SEE LICENSE IN LICENSE", - "engines": { - "node": "^16.13.0 || >=18.10.0" + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-17.0.0.tgz", + "integrity": "sha512-hgS8sa0ARjH9ll3PhkLTufeVXNI2DNR2uFKDhBgq13siUXzzVr/a31M6zgecrtwbA34iaBV01hsTMbMS8V7iIw==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": ">=16.0.0", - "@angular/core": ">=16.0.0", - "@ngx-translate/core": ">=15.0.0", - "rxjs": "^6.5.5 || ^7.4.0" + "@angular/common": ">=16", + "@angular/core": ">=16" } }, "node_modules/@nodelib/fs.scandir": { diff --git a/Front/skydivelogs-app/package.json b/Front/skydivelogs-app/package.json index fa21033..cefd386 100644 --- a/Front/skydivelogs-app/package.json +++ b/Front/skydivelogs-app/package.json @@ -22,8 +22,8 @@ "@angular/platform-browser": "^19.2.6", "@angular/platform-browser-dynamic": "^19.2.6", "@angular/router": "^19.2.6", - "@ngx-translate/core": "^15.0.0", - "@ngx-translate/http-loader": "^8.0.0", + "@ngx-translate/core": "^17.0.0", + "@ngx-translate/http-loader": "^17.0.0", "chart.js": "^4.3.0", "ng2-charts": "^8.0.0", "rxjs": "~7.8.0", @@ -43,4 +43,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.5.4" } -} \ No newline at end of file +} diff --git a/Front/skydivelogs-app/src/app/app.component.ts b/Front/skydivelogs-app/src/app/app.component.ts index 2533e08..2a74927 100644 --- a/Front/skydivelogs-app/src/app/app.component.ts +++ b/Front/skydivelogs-app/src/app/app.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from "@angular/core"; import { Router, RouterOutlet } from "@angular/router"; -import { TranslateModule, TranslateService } from "@ngx-translate/core"; import { CommonModule } from "@angular/common"; import { MatToolbarModule } from "@angular/material/toolbar"; import { MatIconModule } from "@angular/material/icon"; @@ -17,6 +16,12 @@ import { ServiceComm } from "../services/service-comm.service"; import { ConfigurationHelper } from "../services/configuration-helper"; import { ServiceCacheApi } from "../services/service-cache-api.service"; +import { + TranslateService, + TranslateModule, + TranslatePipe, +} from "@ngx-translate/core"; + @Component({ selector: "app-root", templateUrl: "./app.component.html", @@ -31,6 +36,7 @@ import { ServiceCacheApi } from "../services/service-cache-api.service"; MatListModule, RouterOutlet, TranslateModule, + TranslatePipe, ], }) export class AppComponent implements OnInit { diff --git a/Front/skydivelogs-app/src/app/app.config.ts b/Front/skydivelogs-app/src/app/app.config.ts index 555e853..b161a1b 100644 --- a/Front/skydivelogs-app/src/app/app.config.ts +++ b/Front/skydivelogs-app/src/app/app.config.ts @@ -1,6 +1,5 @@ import { inject, provideAppInitializer } from "@angular/core"; import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core"; -import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { provideRouter } from "@angular/router"; import { DatePipe } from "@angular/common"; import { @@ -32,10 +31,16 @@ import { environment } from "../environments/environment"; import { routes } from "./app.routes"; +import { + provideTranslateService, + provideTranslateLoader, +} from "@ngx-translate/core"; +import { provideTranslateHttpLoader } from "@ngx-translate/http-loader"; + // AOT compilation support -export function httpTranslateLoader(http: HttpClient) { - return new TranslateHttpLoader(http); -} +// export function httpTranslateLoader(http: HttpClient) { +// return new TranslateHttpLoader(http); +// } // Déclaration de la fonction d'initialisation de la configuration export function initConfig(configService: ConfigurationHelper) { @@ -69,5 +74,13 @@ export const appConfig: ApplicationConfig = { provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(), + provideTranslateService({ + loader: provideTranslateHttpLoader({ + prefix: "/assets/i18n/", + suffix: ".json", + }), + fallbackLang: "en", + lang: "en", + }), ], }; diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.html b/Front/skydivelogs-app/src/app/create-user/create-user.component.html index af353aa..162541d 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.html +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.html @@ -7,7 +7,7 @@

{{ "LoginCreateUser_Firstname" | translate }} - {{ "LoginCreateUser_FirstnamePattern" | translate }} - + -->

{{ "LoginCreateUser_Lastname" | translate }} - {{ "LoginCreateUser_LastnamePattern" | translate }} - + -->

{{ "LoginCreateUser_Email" | translate }} - {{ "LoginCreateUser_EmailPattern" | translate }} - + -->

{{ "LoginCreateUser_Username" | translate }} - {{ "LoginCreateUser_UsernamePattern" | translate }} - + -->

{{ "LoginCreateUser_Password" | translate }} - {{ "LoginCreateUser_PasswordPattern" | translate }} - + -->

diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts index bd42bed..aaa10c8 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts @@ -6,7 +6,11 @@ import { ReactiveFormsModule, Validators, } from "@angular/forms"; -import { TranslateModule, TranslateService } from "@ngx-translate/core"; +import { + TranslateModule, + TranslatePipe, + TranslateService, +} from "@ngx-translate/core"; import { CommonModule } from "@angular/common"; import { MatFormFieldModule } from "@angular/material/form-field"; @@ -20,10 +24,11 @@ import { User } from "../../models/user"; templateUrl: "./create-user.component.html", styleUrls: ["./create-user.component.css"], imports: [ - TranslateModule, CommonModule, MatFormFieldModule, ReactiveFormsModule, + TranslateModule, + TranslatePipe, ], }) export class CreateUserComponent implements OnInit { @@ -89,7 +94,7 @@ export class CreateUserComponent implements OnInit { createUser.firstName = this.formCtrls["firstname"].value; createUser.lastName = this.formCtrls["lastname"].value; createUser.email = this.formCtrls["email"].value; - createUser.language = this.translateService.currentLang; + createUser.language = this.translateService.getCurrentLang(); this.authenticationService .create(createUser) diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts index 8366b4e..fcac924 100644 --- a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts +++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts @@ -7,7 +7,7 @@ import { ReactiveFormsModule, Validators, } from "@angular/forms"; -import { TranslateModule } from "@ngx-translate/core"; +import { TranslateModule, TranslatePipe } from "@ngx-translate/core"; import { MatInput, MatInputModule } from "@angular/material/input"; import { MatFormFieldModule } from "@angular/material/form-field"; @@ -20,11 +20,12 @@ import { AuthenticationService } from "../../services/authentication.service"; templateUrl: "./login-user.component.html", styleUrls: ["./login-user.component.css"], imports: [ - TranslateModule, CommonModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, + TranslateModule, + TranslatePipe, ], }) export class LoginUserComponent implements OnInit, AfterViewInit { diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html index b373540..b67e8b4 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.html +++ b/Front/skydivelogs-app/src/app/login/login.component.html @@ -1,18 +1,50 @@
- - - {{ 'Login_Title' | translate }} + + + + + + + + + + + + - +
diff --git a/Front/skydivelogs-app/src/app/login/login.component.ts b/Front/skydivelogs-app/src/app/login/login.component.ts index 22d12c5..5a57f3d 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.ts +++ b/Front/skydivelogs-app/src/app/login/login.component.ts @@ -1,5 +1,9 @@ import { Component, OnInit } from "@angular/core"; -import { TranslateModule, TranslateService } from "@ngx-translate/core"; +import { + TranslateModule, + TranslatePipe, + TranslateService, +} from "@ngx-translate/core"; import { CommonModule } from "@angular/common"; import { MatSelectModule } from "@angular/material/select"; import { MatOptionModule } from "@angular/material/core"; @@ -22,14 +26,13 @@ import { CreateUserComponent } from "../create-user/create-user.component"; MatTabsModule, LoginUserComponent, CreateUserComponent, + TranslateModule, ], }) export class LoginComponent implements OnInit { public selectedLanguageFlag: string; constructor(private translate: TranslateService) { - translate.addLangs(["en", "fr"]); - translate.setDefaultLang("en"); this.selectedLanguageFlag = "en"; }