Tentative pour faire fonctionner Ngx-translate

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/core": "^17.0.0",
-        "@ngx-translate/http-loader": "^8.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",
+      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-15.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz",
-      "integrity": "sha512-Am5uiuR0bOOxyoercDnAA3rJVizo4RRqJHo8N3RqJ+XfzVP/I845yEnMADykOHvM6HkVm4SZSnJBOiz0Anx5BA==",
+      "integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==",
-      "license": "SEE LICENSE IN LICENSE",
+      "license": "MIT",
-      "engines": {
+      "dependencies": {
-        "node": "^16.13.0 || >=18.10.0"
+        "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@angular/common": ">=16.0.0",
+        "@angular/common": ">=16",
-        "@angular/core": ">=16.0.0",
+        "@angular/core": ">=16"
-        "rxjs": "^6.5.5 || ^7.4.0"
       }
     },
     "node_modules/@ngx-translate/http-loader": {
-      "version": "8.0.0",
+      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-8.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-17.0.0.tgz",
-      "integrity": "sha512-SFMsdUcmHF5OdZkL1CHEoSAwbP5EbAOPTLLboOCRRoOg21P4GJx+51jxGdJeGve6LSKLf4Pay7BkTwmE6vxYlg==",
+      "integrity": "sha512-hgS8sa0ARjH9ll3PhkLTufeVXNI2DNR2uFKDhBgq13siUXzzVr/a31M6zgecrtwbA34iaBV01hsTMbMS8V7iIw==",
-      "license": "SEE LICENSE IN LICENSE",
+      "license": "MIT",
-      "engines": {
+      "dependencies": {
-        "node": "^16.13.0 || >=18.10.0"
+        "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@angular/common": ">=16.0.0",
+        "@angular/common": ">=16",
-        "@angular/core": ">=16.0.0",
+        "@angular/core": ">=16"
-        "@ngx-translate/core": ">=15.0.0",
-        "rxjs": "^6.5.5 || ^7.4.0"
       }
     },
     "node_modules/@nodelib/fs.scandir": {

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/core": "^17.0.0",
-    "@ngx-translate/http-loader": "^8.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"
   }
-}
+}

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 {

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) {
+// export function httpTranslateLoader(http: HttpClient) {
-  return new TranslateHttpLoader(http);
+//   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",
+    }),
   ],
 };

Front/skydivelogs-app/src/app/create-user/create-user.component.html

@@ -7,7 +7,7 @@
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
-      <input
+      <!-- <input
         matInput
         type="text"
         formControlName="firstname"
@@ -19,13 +19,13 @@
       </mat-error>
       <mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
         {{ "LoginCreateUser_FirstnamePattern" | translate }}
-      </mat-error>
+      </mat-error> -->
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Lastname" | translate }}</mat-label>
-      <input
+      <!-- <input
         matInput
         type="text"
         formControlName="lastname"
@@ -37,13 +37,13 @@
       </mat-error>
       <mat-error *ngIf="formCtrls['lastname'].hasError('minlength')">
         {{ "LoginCreateUser_LastnamePattern" | translate }}
-      </mat-error>
+      </mat-error> -->
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Email" | translate }}</mat-label>
-      <input
+      <!-- <input
         matInput
         type="email"
         formControlName="email"
@@ -55,13 +55,13 @@
       </mat-error>
       <mat-error *ngIf="formCtrls['email'].hasError('email')">
         {{ "LoginCreateUser_EmailPattern" | translate }}
-      </mat-error>
+      </mat-error> -->
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Username" | translate }}</mat-label>
-      <input
+      <!-- <input
         matInput
         type="text"
         formControlName="username"
@@ -73,13 +73,13 @@
       </mat-error>
       <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
         {{ "LoginCreateUser_UsernamePattern" | translate }}
-      </mat-error>
+      </mat-error> -->
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Password" | translate }}</mat-label>
-      <input
+      <!-- <input
         matInput
         type="password"
         formControlName="password"
@@ -91,7 +91,7 @@
       </mat-error>
       <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
         {{ "LoginCreateUser_PasswordPattern" | translate }}
-      </mat-error>
+      </mat-error> -->
     </mat-form-field>
   </p>
 

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)

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 {

Front/skydivelogs-app/src/app/login/login.component.html

@@ -1,18 +1,50 @@
 <div class="content">
-  <mat-card style="max-width: 500px;" flex="50">
+  <mat-select
-    <mat-card-header style="align-items: center; justify-content: center; background-color: rgba(0,0,0,.03);">
+    (selectionChange)="switchLang($event)"
-      <mat-card-title>{{ 'Login_Title' | translate }}</mat-card-title>
+    [(value)]="selectedLanguageFlag"
+    style="width: 60px; padding-left: 30px"
+  >
+    <mat-select-trigger>
+      <img
+        src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
+        style="width: 30px"
+      />
+    </mat-select-trigger>
+    <mat-option value="fr">
+      <img src="assets/img/fr.svg" style="width: 30px" />
+    </mat-option>
+    <mat-option value="en">
+      <img src="assets/img/en.svg" style="width: 30px" />
+    </mat-option>
+  </mat-select>
+  <app-create-user></app-create-user>
 
-      <mat-select (selectionChange)="switchLang($event)" [(value)]="selectedLanguageFlag"
+  <!-- <mat-card style="max-width: 500px" flex="50">
-                  style="width: 60px; padding-left: 30px;" >
+    <mat-card-header
+      style="
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.03);
+      "
+    >
+      <mat-card-title>{{ "Login_Title" | translate }}</mat-card-title>
+
+      <mat-select
+        (selectionChange)="switchLang($event)"
+        [(value)]="selectedLanguageFlag"
+        style="width: 60px; padding-left: 30px"
+      >
         <mat-select-trigger>
-          <img src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}" style="width: 30px;">
+          <img
+            src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
+            style="width: 30px"
+          />
         </mat-select-trigger>
         <mat-option value="fr">
-          <img src="assets/img/fr.svg" style="width: 30px;">
+          <img src="assets/img/fr.svg" style="width: 30px" />
         </mat-option>
         <mat-option value="en">
-          <img src="assets/img/en.svg" style="width: 30px;">
+          <img src="assets/img/en.svg" style="width: 30px" />
         </mat-option>
       </mat-select>
     </mat-card-header>
@@ -27,5 +59,5 @@
         </mat-tab>
       </mat-tab-group>
     </mat-card-content>
-  </mat-card>
+  </mat-card> -->
 </div>

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";
   }