chore(translate): improvement

* Adds primeng locale package.
* Refactors the translate service.
* Initializes translate service on Core module.

Co-Authored-by: Bertrand Zuchuat <[email protected]>

package.json

@@ -42,6 +42,7 @@
     "ngx-toastr": "^18.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
+    "primelocale": "^1.0.3",
     "primeng": "^17.18.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",

projects/ng-core-tester/src/app/app.component.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, OnInit, inject } from '@angular/core';
-import { CoreConfigService, RecordEvent, RecordService, TitleMetaService, TranslateService } from '@rero/ng-core';
+import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core';
 import { MenuItem, MessageService } from 'primeng/api';
 
 /**
@@ -28,7 +28,7 @@ import { MenuItem, MessageService } from 'primeng/api';
 export class AppComponent implements OnInit {
 
   /** Service injection */
-  translateService = inject(TranslateService);
+  // translateService = inject(TranslateService);
   configService = inject(CoreConfigService);
   titleMetaService = inject(TitleMetaService);
   recordService = inject(RecordService);
@@ -57,7 +57,7 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     this.initializeEvents();
-    this.translateService.setLanguage(this.lang);
+    // this.translateService.setLanguage(this.lang);
     // Set default title window when application start
     const prefix = this.configService.prefixWindow;
     if (prefix) {

projects/ng-core-tester/src/app/app.module.ts

@@ -21,9 +21,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CoreConfigService, RecordModule, RecordService, RemoteAutocompleteService, TranslateLoader } from '@rero/ng-core';
-import { defineLocale } from 'ngx-bootstrap/chronos';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { deLocale, enGbLocale, frLocale, itLocale } from 'ngx-bootstrap/locale';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { MenubarModule } from 'primeng/menubar';
 import { AppConfigService } from './app-config.service';
@@ -32,12 +30,12 @@ import { AppComponent } from './app.component';
 import { AppDialogComponent } from './home/dialog/app-dialog.component';
 import { HomeComponent } from './home/home.component';
 import { ToastComponent } from './home/toast/toast.component';
+import { MenuComponent } from './menu/menu.component';
 import { DetailComponent } from './record/document/detail/detail.component';
 import { DocumentComponent } from './record/document/document.component';
 import { EditorComponent } from './record/editor/editor.component';
 import { RecordServiceMock } from './record/editor/record-service-mock';
 import { SearchBarComponent } from './search-bar/search-bar.component';
-import { MenuComponent } from './menu/menu.component';
 import { AppRemoteAutocompleteService } from './service/app-remote-autocomplete.service';
 
 @NgModule({
@@ -86,16 +84,4 @@ import { AppRemoteAutocompleteService } from './service/app-remote-autocomplete.
     ],
     bootstrap: [AppComponent]
 })
-export class AppModule {
-  availableLocales = {
-    de: deLocale,
-    en: enGbLocale,
-    fr: frLocale,
-    it: itLocale
-  };
-  constructor() {
-    Object.keys(this.availableLocales).forEach(locale => {
-      defineLocale(locale, this.availableLocales[locale]);
-    });
-  }
-}
+export class AppModule {}

projects/rero/ng-core/src/lib/core.module.ts

@@ -16,9 +16,9 @@
  */
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { NgxSpinnerModule } from 'ngx-spinner';
@@ -47,6 +47,15 @@ import { TranslateLanguagePipe } from './translate/translate-language.pipe';
 import { TranslateLoader } from './translate/translate-loader';
 import { MenuComponent } from './widget/menu/menu.component';
 import { SortListComponent } from './widget/sort-list/sort-list.component';
+import { NgCoreTranslateService } from './translate/translate-service';
+import { Observable, of } from 'rxjs';
+
+function initializeAppFactory(translateService: NgCoreTranslateService): () => Observable<any> {
+  return () => {
+    translateService.initialize();
+    return of(true);
+  };
+}
 
 @NgModule({
     declarations: [
@@ -115,7 +124,14 @@ import { SortListComponent } from './widget/sort-list/sort-list.component';
     providers: [
       ComponentCanDeactivateGuard,
       ConfirmationService,
-      MessageService
+      MessageService,
+      { provide: TranslateService, useValue: NgCoreTranslateService },
+      {
+        provide: APP_INITIALIZER,
+        useFactory: initializeAppFactory,
+        deps: [NgCoreTranslateService],
+        multi: true
+      }
     ]
 })
 export class CoreModule { }

projects/rero/ng-core/src/lib/translate/date-translate-pipe.spec.ts

@@ -16,7 +16,7 @@
  */
 import { EventEmitter } from '@angular/core';
 import { DateTranslatePipe } from './date-translate-pipe';
-import { TranslateService } from './translate-service';
+import { TranslateService } from './translate-service_old';
 import en from '@angular/common/locales/en-GB';
 import { registerLocaleData } from '@angular/common';
 

projects/rero/ng-core/src/lib/translate/date-translate-pipe.ts

@@ -15,31 +15,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { DatePipe } from '@angular/common';
-import { Inject, Pipe, PipeTransform } from '@angular/core';
-import { TranslateService } from './translate-service';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Pipe({
   name: 'dateTranslate',
   pure: false, // required to update the value when the promise is resolved
 })
 export class DateTranslatePipe extends DatePipe implements PipeTransform {
-  /**
-   * Constructor.
-   *
-   * @param translateService Translate service.
-   */
-  constructor(
-    @Inject(TranslateService) private translateService: TranslateService
-  ) {
-    super(translateService.currentLanguage);
-  }
+
+  translateService = inject(TranslateService);
 
   transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
   transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
   transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string): string | null
   {
     if (!locale) {
-      locale = this.translateService.currentLanguage;
+      locale = this.translateService.currentLang;
     }
 
     if (locale === 'en') {