feat: i18n (Initial Version, WIP, #756)

Internationalize the UI and add German and English localizations

Initial version merged to prevent further sprawl between main and this PR. Some gaps will incrementally be fixed.

---------

Co-authored-by: Annemieke Verdenhalven <annemieke.verdenhalven@fit.fraunhofer.de>
Co-authored-by: Andreas Timmermann <andreas.timmermann@fit.fraunhofer.de>
Co-authored-by: Richard Treier <richard.treier@sovity.de>

CHANGELOG.md

@@ -16,6 +16,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Major
 
+- Internationalize the UI and add a German localization
+
 #### Minor
 
 #### Patch

NOTICE

@@ -0,0 +1,11 @@
+sovity EDC UI
+Copyright (c) 2024. sovity GmbH
+
+This product includes software developed at sovity GmbH (https://www.sovity.de).
+Copyright (c) 2024. sovity GmbH
+
+The initial internationalization of the EDC UI and localization to German was done
+by the Fraunhofer Institute for Applied Information Technology FIT (https://www.fit.fraunhofer.de/).
+This project was part of the national flagship project "Datenraum Kultur" and was funded
+by the Federal Government Commissioner for Culture and the Media from 2023 to 2025.
+Copyright (c) 2024. Fraunhofer Institute for Applied Information Technology FIT

package.json

@@ -27,6 +27,8 @@
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
     "@ng-apimock/core": "^3.11.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "@ngxs/store": "^3.8.1",
     "@sovity.de/edc-client": "10.4.0",
     "clean-deep": "^3.4.0",

src/app/app-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {ROUTES, RouterModule, Routes} from '@angular/router';
-import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {APP_CONFIG, AppConfig} from './core/config/app-config';
+import {PageNotFoundPageComponent} from './routes/connector-ui/page-not-found-page/page-not-found-page.component';
 
 @NgModule({
   imports: [RouterModule.forRoot([], {paramsInheritanceStrategy: 'always'})],
@@ -27,7 +27,7 @@ import {APP_CONFIG, AppConfig} from './core/config/app-config';
           default:
             throw new Error(`Unhandled PageSet: ${config.routes}`);
         }
-        routes.push({path: '**', component: PageNotFoundComponent});
+        routes.push({path: '**', component: PageNotFoundPageComponent});
         return routes;
       },
     },

src/app/app.module.ts

@@ -1,15 +1,22 @@
-import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+  HttpClientModule,
+} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {TitleStrategy} from '@angular/router';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {NgxsModule} from '@ngxs/store';
 import {NgChartsModule} from 'ng2-charts';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {provideAppConfig} from './core/config/app-config-initializer';
 import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
-import {SharedModule} from './shared.module';
+import {CustomPageTitleStrategy} from './core/services/page-title-strategy';
+import {SharedModule} from './shared/shared.module';
 
 @NgModule({
   imports: [
@@ -18,23 +25,36 @@ import {SharedModule} from './shared.module';
     BrowserModule,
     HttpClientModule,
 
-    SharedModule,
+    //Translation
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => new TranslateHttpLoader(http),
+        deps: [HttpClient],
+      },
+    }),
 
     // NgXs
     NgxsModule.forRoot([]),
 
     // Third Party
     NgChartsModule.forRoot(),
 
+    // Features
+    SharedModule,
+
     // Routing
     AppRoutingModule,
   ],
-  declarations: [AppComponent, PageNotFoundComponent],
+  declarations: [AppComponent],
   providers: [
+    HttpClient,
     provideAppConfig(),
 
     {provide: HTTP_INTERCEPTORS, multi: true, useClass: ApiKeyInterceptor},
+    {provide: TitleStrategy, useClass: CustomPageTitleStrategy},
   ],
   bootstrap: [AppComponent],
+  exports: [TranslateModule],
 })
 export class AppModule {}