Tentative pour faire fonctionner Ngx-translate

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) {
-  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",
+    }),
   ],
 };

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-card-header style="align-items: center; justify-content: center; background-color: rgba(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"
+      />
+    </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"
-                  style="width: 60px; padding-left: 30px;" >
+  <!-- <mat-card style="max-width: 500px" flex="50">
+    <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";
   }