fix for TranslateModule not exported (#1355)

fix lint errors
Squashing and merging the PR after discussion with Ed.
Co-authored-by: Nestor Lazcano <nestor_ronal09@hotmail.com>

package-lock.json

@@ -4009,6 +4009,21 @@
         "tslib": "^1.9.0"
       }
     },
+    "@ngx-translate/http-loader": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-6.0.0.tgz",
+      "integrity": "sha512-LCekn6qCbeXWlhESCxU1rAbZz33WzDG0lI7Ig0pYC1o5YxJWrkU9y3Y4tNi+jakQ7R6YhTR2D3ox6APxDtA0wA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",

package.json

@@ -45,6 +45,7 @@
     "@fortawesome/fontawesome-svg-core": "1.2.18",
     "@fortawesome/free-solid-svg-icons": "5.8.2",
     "@ngx-translate/core": "11.0.1",
+    "@ngx-translate/http-loader": "^6.0.0",
     "chart.js": "3.0.0-alpha",
     "core-js": "2.5.0",
     "lodash": "4.17.21",

src/app/app.module.ts

@@ -5,9 +5,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
-/** Tanslation Imports */
-import { TranslateModule } from '@ngx-translate/core';
-
 /** Environment Configuration */
 import { environment } from 'environments/environment';
 
@@ -55,7 +52,6 @@ import { AppRoutingModule } from './app-routing.module';
     HammerModule,
     HttpClientModule,
     ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }),
-    TranslateModule.forRoot(),
     CoreModule,
     HomeModule,
     LoginModule,

src/app/core/core.module.ts

@@ -4,7 +4,8 @@ import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
 
 /** Translation Imports */
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 /** Custom Services */
 import { AuthenticationService } from './authentication/authentication.service';
@@ -47,7 +48,15 @@ import { ContentComponent } from './shell/content/content.component';
   imports: [
     SharedModule,
     HttpClientModule,
-    TranslateModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => {
+          return new TranslateHttpLoader(http, `${ window.location.protocol }//${ window.location.host }/assets/translations/`, '.json');
+        },
+        deps: [HttpClient]
+      }
+    }),
     RouterModule
   ],
   declarations: [

src/app/core/http/api-prefix.interceptor.ts

@@ -18,7 +18,13 @@ export class ApiPrefixInterceptor implements HttpInterceptor {
    * Intercepts a Http request and prefixes it with `environment.serverUrl`.
    */
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    request = request.clone({ url: environment.serverUrl + request.url });
+    /**
+     * Ignore URLs that are complete for i18n
+     */
+     if (!request.url.includes('http:') && !request.url.includes('https:')) {
+      request = request.clone({ url: environment.serverUrl + request.url });
+    }
+
     return next.handle(request);
   }
 

src/app/core/i18n/i18n.service.ts

@@ -34,11 +34,7 @@ export class I18nService {
   defaultLanguage: string;
   supportedLanguages: string[];
 
-  constructor(private translateService: TranslateService) {
-    // Embed languages to avoid extra HTTP requests
-    translateService.setTranslation('en-US', enUS);
-    translateService.setTranslation('fr-FR', frFR);
-  }
+  constructor(private translateService: TranslateService) { }
 
   /**
    * Initializes i18n for the application.
@@ -78,7 +74,8 @@ export class I18nService {
     }
 
     log.debug(`Language set to ${language}`);
-    this.translateService.use(language);
+    localStorage.setItem(this.languageStorageKey, language);
+    this.translateService.setDefaultLang(language);
   }
 
   /**

src/app/core/shell/toolbar/toolbar.component.html

@@ -20,19 +20,19 @@
 
       <a mat-tab-link class="tab-link" [routerLink]="['/accounting']">
         <fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
-        Accounting
+        {{ 'Accounting' | translate }}
       </a>
       <a mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
         <fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
-        Reports
+        {{ 'Reports' | translate }}
       </a>
       <a mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
-        Admin
+        {{ 'Admin' | translate }}
       </a>
       <a mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="users" size="lg"></fa-icon>
-        Self Service
+        {{ 'Self Service' | translate }}
       </a>
 
     </span>

src/app/shared/language-selector/language-selector.component.ts

@@ -27,6 +27,7 @@ export class LanguageSelectorComponent implements OnInit {
    */
   constructor(private i18nService: I18nService) {
     this.languageSelector.setValue(this.currentLanguage);
+    this.languageSelector.valueChanges.subscribe( language => this.setLanguage(language) );
   }
 
   ngOnInit() {

src/assets/translations/en-US.json

@@ -11,5 +11,10 @@
   "Username is required": "Username is required",
   "Username or password incorrect.": "Username or password incorrect",
   "Remember me": "Remember me",
-  "Version": "Version"
+  "Version": "Version",
+  "Accounting": "Accounting",
+  "Reports": "Reports",
+  "Admin": "Admin",
+  "Self Service": "Self Service",
+  "Institution": "Institution"
 }

src/assets/translations/fr-FR.json

@@ -11,5 +11,10 @@
   "Username is required": "Identifiant requis",
   "Username or password incorrect.": "Identifiant ou mot de passe incorrect",
   "Remember me": "Rester connecté",
-  "Version": "Version"
+  "Version": "Version",
+  "Accounting": "Comptabilité",
+  "Reports": "Rapports",
+  "Admin": "Admin",
+  "Self Service": "En libre service",
+  "Institution": "Institution"
 }