Using pia lib v4

.eslintrc.json

@@ -39,15 +39,15 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "tm",
+            "prefix": "app",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "warn",
           {
             "type": "element",
-            "prefix": "tm",
+            "prefix": "app",
             "style": "kebab-case"
           }
         ],

angular.json

@@ -8,7 +8,7 @@
       "schematics": {},
       "root": "",
       "sourceRoot": "src",
-      "prefix": "tm",
+      "prefix": "app",
       "architect": {
         "build": {
           "builder": "ngx-build-plus:browser",

nginx/locations.conf

@@ -1,4 +1,4 @@
-location @@APP_BASE_HREF {
+location @@APP_BASE_HREFbff {
   proxy_pass @@BFF_URL;
   proxy_set_header Host            $host;
   proxy_set_header X-Forwarded-For $remote_addr;

package.json

@@ -49,11 +49,11 @@
     "@ngneat/falso": "^6.4.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@onecx/accelerator": "^3.7.1",
-    "@onecx/integration-interface": "^3.7.1",
-    "@onecx/keycloak-auth": "^3.7.1",
-    "@onecx/portal-integration-angular": "^3.7.1",
-    "@onecx/portal-layout-styles": "^3.7.1",
+    "@onecx/accelerator": "^4.1.2",
+    "@onecx/integration-interface": "^4.1.2",
+    "@onecx/keycloak-auth": "^4.1.2",
+    "@onecx/portal-integration-angular": "^4.1.2",
+    "@onecx/portal-layout-styles": "^4.1.2",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.6.0",
     "ngx-color": "^8.0.3",
@@ -90,7 +90,7 @@
     "@swc-node/register": "^1.6.5",
     "@swc/cli": "~0.1.63",
     "@swc/core": "^1.3.56",
-    "@swc/helpers": "0.5.1",
+    "@swc/helpers": "0.5.3",
     "@types/jasmine": "~3.10.0",
     "@types/node": "18.16.3",
     "@typescript-eslint/eslint-plugin": "5.48.2",
@@ -122,12 +122,12 @@
     "ngx-build-plus": "^14.0.0",
     "ngx-translate-testing": "^6.1.0",
     "postcss": "8.4.23",
-    "postcss-import": "~15.1.0",
+    "postcss-import": "~16.0.0",
     "postcss-preset-env": "~9.3.0",
     "postcss-url": "~10.1.3",
     "prettier": "^2.8.8",
     "sonarqube-scanner": "^3.3.0",
-    "style-loader": "^3.3.2",
+    "style-loader": "^3.3.4",
     "stylus": "^0.59.0",
     "stylus-loader": "^7.1.0",
     "tailwindcss": "3.3.2",

proxy.conf.js

@@ -17,11 +17,11 @@ const bypassFn = function (req, res) {
 }
 
 const PROXY_CONFIG = {
-  '/theme-bff': {
+  '/bff': {
     target: 'http://onecx-theme-bff',
     secure: false,
     pathRewrite: {
-      '^.*/theme-bff': ''
+      '^.*/bff': ''
     },
     changeOrigin: true,
     logLevel: 'debug',

src/app/app.component.spec.ts

@@ -1,7 +1,8 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
-import { AppComponent } from './app.component'
 import { RouterTestingModule } from '@angular/router/testing'
-import { NO_ERRORS_SCHEMA } from '@angular/core'
+
+import { AppComponent } from './app.component'
 
 describe('AppComponent', () => {
   beforeEach(async () => {

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 @Component({
-  selector: 'tm-root',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {

src/app/app.module.ts

@@ -1,35 +1,61 @@
 import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { HttpClient, HttpClientModule } from '@angular/common/http'
+import { RouterModule, Routes } from '@angular/router'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { TranslateService } from '@ngx-translate/core'
-import { DialogService } from 'primeng/dynamicdialog'
-import { Observable } from 'rxjs'
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'
 
-import { APP_CONFIG, PortalCoreModule } from '@onecx/portal-integration-angular'
+import {
+  APP_CONFIG,
+  AppStateService,
+  createTranslateLoader,
+  translateServiceInitializer,
+  PortalCoreModule,
+  UserService
+} from '@onecx/portal-integration-angular'
 import { KeycloakAuthModule } from '@onecx/keycloak-auth'
 
 import { AppComponent } from './app.component'
 import { environment } from '../environments/environment'
 
-// standalone app: ensure translations are loaded during app init
-function initializer(translate: TranslateService): () => Observable<any> {
-  console.log('App module initializer')
-  return () => {
-    translate.addLangs(['en', 'de'])
-    const browserLang = translate.getBrowserLang()
-    return translate.use(browserLang?.match(/en|de/) ? browserLang : 'en')
-  }
-}
-
+const routes: Routes = [{ path: '', pathMatch: 'full' }]
 @NgModule({
   bootstrap: [AppComponent],
   declarations: [AppComponent],
-  imports: [BrowserModule, KeycloakAuthModule, BrowserAnimationsModule, PortalCoreModule.forRoot('onecx-theme-ui')],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    HttpClientModule,
+    KeycloakAuthModule,
+    BrowserAnimationsModule,
+    RouterModule.forRoot(routes, {
+      initialNavigation: 'enabledBlocking',
+      enableTracing: true
+    }),
+    PortalCoreModule.forRoot('onecx-theme-ui'),
+    TranslateModule.forRoot({
+      isolate: true,
+      loader: {
+        provide: TranslateLoader,
+        useFactory: createTranslateLoader,
+        deps: [HttpClient, AppStateService]
+      }
+    })
+  ],
   providers: [
-    DialogService,
     { provide: APP_CONFIG, useValue: environment },
-    { provide: APP_INITIALIZER, useFactory: initializer, multi: true, deps: [TranslateService] }
+    {
+      provide: APP_INITIALIZER,
+      useFactory: translateServiceInitializer,
+      multi: true,
+      deps: [UserService, TranslateService]
+    }
   ],
   schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
 })
-export class AppModule {}
+export class AppModule {
+  constructor() {
+    console.info('App Module constructor')
+  }
+}