BPA-Benutzerhandbuch Benutzerdefiniertes MFE v4.1.2 erstellen

Benutzerdefinierte MFE-Erstellung

MicroFrontEnd (MFE) ist ein Architekturmuster, bei dem verschiedene Fragmente von Benutzeroberflächen-Seiten zur Buildzeit oder Laufzeit zusammengesetzt werden. Jede MFE wird unabhängig entwickelt.

MFE wird erstellt

Anwendungen, die mit einem beliebigen Framework entwickelt wurden, können als MFE geladen werden. Der folgende Abschnitt ist ein Beispiel für das Hinzufügen einer Angular-Anwendung als MFE.

Winkelbasierte Anwendungen erstellen

1. Führen Sie den folgenden Befehl aus, um eine Angular-Anwendung mit dem Namen test-mfe zu erstellen.

ng new test-mfe —routing —style=scss

2. Führen Sie den Befehl cd aus, um zu test-mfe zu wechseln.
3. Führen Sie den folgenden Befehl aus, um ein einzelnes Spa in test-mfe hinzuzufügen:

ng add single-spa-angular@7 —project test-mfe

Anmerkung: Es wird eine kompatible Version von Angular 14 und single-spa-angular@7 verwendet.

4. Geben Sie den Port für die lokale Entwicklung während des Aufrufs des vorherigen Befehls an. Dieselbe Einstellung wird hinzugefügt wie deployUrl in "angle.json".

Anmerkung: Die deployUrl-Einstellung dient nur der lokalen Entwicklung.

"deployUrl": "http://localhost:4201/"

Erstellen von Winkelanwendungen in NX Monorepo

1. Führen Sie den folgenden Befehl aus, um eine Angular-Anwendung innerhalb des Arbeitsbereichs NRWL-Erweiterungen (Nx) zu erstellen:

npx create-nx-workspace@15.0.0 —pre-set=angle —npmScope=cisco-bpa-platform

2. Geben Sie die Benutzereingaben ein, wie im folgenden Beispiel veranschaulicht:

Der Arbeitsbereich bpa-test-mfe Nx wird mit der Applikation bpa-test-mfe erstellt.

3. Wenden Sie "Single-SPA-Winkel"-Schemata an, um die neu erstellte Winkel-Anwendung zu konfigurieren. Die Version ändert sich je nach Winkelversion.
4. Führen Sie den Befehl cd aus, um zu test-mfe zu wechseln.
5. Führen Sie den folgenden Befehl aus, um ein einzelnes SPA in bpa-test-mfe hinzuzufügen:

npm install single-spa-angular@7 \--legacy-peer-deps && npx nx g
single-spa-angular:ng-add \--project bpa-test-mfe

Die folgenden Dateien werden erstellt und aktualisiert:

6. Geben Sie den Port für die lokale Entwicklung während des Aufrufs des vorherigen Befehls an. Dieselbe Einstellung wird in "project.json" hinzugefügt wie deployUrl.

Anmerkung: Die deployUrl-Einstellung dient nur der lokalen Entwicklung.

"deployUrl": "http://localhost:4201",

Allgemeine Änderungen für Winkel- und Nx-Winkelanwendungen

Überprüfen der Webpack-Version

Aktualisieren Sie die "@angular-builders/custom-webpack"-Version, die der Angular-Version entspricht. Die Version im folgenden Beispiel wird für Angular 14-Anwendungen verwendet.

"@angular-builders/custom-webpack": "14.1.0",

Auswahl aktualisieren

Aktualisieren Sie die Vorlage mit dem eindeutigen Selektor "<app-test-mfe-root>" in ./src/main.single-spa.ts.

Aktualisieren der Auswahl in der Stammkomponente

Aktualisieren Sie denselben Selektornamen "<app-test-mfe-root>" in ./src/app/app.component.ts.

Installieren von Systemsjs-web-interop

Das NPM-Paket "systemsjs-web-interop" dient zur dynamischen Festlegung des öffentlichen Pfads für Ressourcen.

systemjs-webpack-interop": "^2.3.7",

Installieren Sie "systemsjs-web-interop" und fügen Sie die folgende Zeile als erste Importanweisung in die Datei "main.single-spa.ts" ein.

systemjsModuleName muss eindeutig sein und als Name verwendet werden, der die MFE wie oben dargestellt identifiziert. Die obige Änderung hilft beim Auflösen der langsam geladenen Ressourcen vom entsprechenden Host der MFE.

Route wird aktualisiert

Schließen Sie die anwendungsspezifischen Routen in die Datei "app.routes.ts" der neuen eckigen Anwendung ein.

Anmerkung: Der folgende Pfad zu "app.routes.ts" muss enthalten sein.

{ path: '**',  component: EmptyRouteComponent }

Änderungen bei Microservices für Onboarding von MFE-Anwendungen

Die meisten UI-Anwendungen sind einem Microservice per Design zugeordnet. Die folgenden Schritte in den folgenden Abschnitten sollten ausgeführt werden, damit der verknüpfte Mikrodienst die verknüpfte Benutzeroberflächenanwendung als MFE lädt.

Definieren von MFE-Details

1. Erstellen Sie eine Datei "mfe.json" in microservice/src/config/mfe.json.

[
    {
        "layoutenabled" : true,
        "name" : "@cisco-bpa-platform/test-mfe-root",
        "type": "application", 
        "path": "ex/test-mfe", 
        "display_name": "Test MFE", 
        "menu_path": "Application", 
        "custom": true, 
        "default": false, 
        "distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
        "version": "4.1.0-501"
    }
]

2. Fügen Sie die Details der MFE wie folgt hinzu:

• Benutzerdefiniert: Gibt an, ob diese Anwendung benutzerdefiniert ist.
• Layout aktiviert: Dieses Attribut aktivieren, wenn ein Header erforderlich ist
• Name: Eindeutiger Name für die MFE-Anwendung
• Anzeigename: Name, der in der Seitennavigation als Menüelement angezeigt wird
• Typ: Zeigt die MFE-Anwendung an
• Menüpfad: Gibt das Navigationsmenü an, unter dem die MFE-Anwendung als Menüelement hinzugefügt wird. funktioniert in Kombination mit benutzerdefiniertem Attribut
• Verteilungspfad: Zeigt die statische Datei an, die die MFE-Anwendung lädt.
• Pfad: Gibt die URL-Route an, der die MFE-Anwendung zugeordnet ist.
• Standard: Bei "true" sollte der Pfad nicht vorhanden sein. Wenn sie auf false gesetzt ist, ist der Pfad vorhanden.

Registrieren von MFE

Aufrufen eines Core-API-Endpunkts (z. B. POST-mfe/apps), um die entsprechenden MFE(s) zu integrieren Zur Vereinfachung des Prozesses wird eine addMfeApps-Dienstprogrammmethode erstellt, um die MFE-Informationen zu akzeptieren. So registrieren Sie die in der BPA-Datei "mfe.json" definierten MFE-Details

1. Importieren Sie mfeHelper aus der gemeinsamen Anwendung im Microservice "app.js".

const { mfeHelper } = require('@cisco-bpa-platform/mw-util-common-app');

2. Registrieren Sie MFE-Details mit der addMfeApps()-Methode. Damit wird ein Eintrag in der Sammlung "mongo db core_db -> mfe_apps" hinzugefügt.

Die MFE ist bereit zum Testen.

Testen der benutzerdefinierten MFE

Lokale Einrichtung

1. Erstellen der MFE-Anwendung
2. Stellen Sie die winkelmäßige Anwendungsverteilung im Assetordner des Containers bereit, der den entsprechenden Mikroservice bereitstellt (z. B. /root/MFE-app/dist/:/home/node/app/assets).
3. Starten Sie den Microservice-Container neu.
4. Browser aktualisieren

Änderungen erstellen

1. Aktualisieren Sie während der Image-Erstellung die Dockerdatei, um die Angular-Anwendungsverteilung in den Assets-Ordner im Container zu packen. In der Seitennavigation wird das Menü Test MFE angezeigt.
2. Klicken Sie auf das Menü Test MFE, um die MFE zu laden (URL: https://<host>/ex/test-mfe).

Anmerkung: Beim Laden der neuen MFE wird die Seitennavigation nicht angezeigt, da sie nicht in die neue MFE integriert ist.

Aktivieren der Seitennavigation

1. Erstellen Sie eine neue Datei im Pfad test-mfe/src/types/decl.d.ts.
2. Fügen Sie die folgende Deklarationszeile hinzu:

declare module '@cisco-bpa-platform/utility-state';

3. Öffnen Sie "test-mfe/extra-webpack.config.js", und fügen Sie config.externals = ['@cisco-bpa-platform/utility-state'] hinzu.

Die obigen Schritte definieren @cisco-bpa-platform/Betriebszustand und überspringen den Importfehler.

4. Überprüfen und installieren Sie die folgenden Abhängigkeiten:
   • @angular/cdk: "~14,2,7"
   • "@angular/material": "~14,2,5"
   • "@angular/localize": "^14,2,6"
   • "@cisco-bpa-platform/cxui-components": "4.0.1-1003"
   • "@cisco-bpa-platform/data-access-services": "4.1.1-1003"
   • "@cisco-bpa-platform/Anmeldung": "4.0.3-1002"
   • "@cisco-bpa-platform/shared-library": "4.0.1-1001"
   • "@cisco-bpa-platform/spogui-components": "4.1.1-1005"
   • "@cisco-bpa-platform/ui-shared-components": "4.1.1-1005"
   • @cisco-bpa-platform/util: "4.0.1-1002"
   • "@ngrx/Component Store": "~14,0,0"
   • "@ngrx/Effekte": "~14,0,0"
   • "@ngrx/entity": "~14,0,0"
   • "@ngrx/router-store": "~14,0,0"
   • "@ngrx/store": "~14,0,0"
   • "Dateischoner": "^2,0,5"
   • Entwicklungsabhängigkeiten
   • "@types/Dateischoner": "^2.0.7"

Anmerkung: Es müssen die korrekten Versionen für alle cisco-bpa-Plattform-Bibliotheken verwendet werden.

5. Aktualisieren Sie die folgenden Stammdateien wie unten beschrieben:
   • “app.component.html”
   • "app.component.ts"

   import { Component, HostListener } from @angular/core';
   import { Router } from @angular/router';
   import { Observable } from 'rxjs';
   import { Loaderservice } from '@cisco-bpa-platform/data-access-services/auth'; 
   @Component({
       selector: 'app-test-mfe-root',
       templateUrl : '. /app. component. html',
       styleUrls: ['./app.component.scss'] 
   })
   export class AppComponent {
       title = 'test-mfe';
       showLoader = false;
       loadingSpinner$: Observable
         
         
           = this.loaderService.spinnerObsv$; leftNavWidth = ['50px', '250px']; isExpanded = false; innerWidth: any; innerHeight: any; constructor(public router: Router, public loaderservice: Loaderservice, ) { this.onResize(); } @HostListener('window:resize', ['$event']) onResize() { this.innerWidth = window.innerWidth; this.innerHeight = (window.innerHeight - 73); } shareExpandStatus (event: boolean) { this.isExpanded = event; } } 
         

   • "app.module.ts"

   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   import { NgModule } from '@angular/core' ;
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { LoaderModule } from '@cisco-bpa-platform/cxui-components/loader';
   import { AuthEffects, Authlnterceptor, authReducer } from '@cisco-bpa-platform/login/feature-login';
   import { SideNavModule } from '@cisco-bpa-platform/spogui-components/side-nav';
   import { EffectsModule } from '@ngrx/effects';
   import { StoreModule } from '@ngrx/store';
   import { environment } from '../environments/environment';
   import { AppComponent } from './app.component';
   import { AppRoutingModule } from './app-routing.module';
   
   @NgModule({ 
       declarations : [AppComponent], 
       imports: [BrowserModule, AppRoutingModule, HttpClientModule, 
           BrowserAnimationsModule, 
           HttpClientModule, 
           StoreModule. forRoot({ ['auth']: authReducer }, { 
               runtimechecks: {
                   strictStatelmmutability: false, 
                   strictActionlmmutability: false 
               }
           }),
           EffectsModule.forRoot([AuthEffects]), LoaderModule, SideNavModule], 
       providers: [
           { provide: ‘config’, useValue: { apiUrl: environment .apiUrl, mfa: environment .mfa } }, 
           {
               provide: HTTP_INTERCEPTORS, 
               useClass: Authlnterceptor, 
               multi: true,
           },
       ], 
       bootstrap: [AppComponent] 
   }) 
   export class AppModule { }

   • "environment.prod.ts"

   const URL = `${i window.location.href.substring(0, window.location.href.lastIndexOf('ex'))}bpa` ;
   export const environment = { 
       production: true, 
       appTitle: "BPA | ”, 
       appName: "Business Process Automation”, 
       apiurl: `${URL}`, 
       assetsUrl: "./assets”, 
       packageUr1: "./assets/packages", 
       mfa: {
           enabled: false,
           o t p_u r 1 : 'https://ssologon-prd.sm.bankofamerica.com/ssoconnect/sendOTP.htm1' 
       }, 
       sync: {
           groups: false, 
           users: false 
       }, 
       autoRef reshlnterval : 60000, 
       showFormBuilderListltems: false, 
       deploymentType: "not_on_prem"
   };

   • "environment.ts"

   const HOSTNAME = window.location.hostname;
   const URL = `http ://${HOSTNAME}: 8000`;
   export const environment = { 
       production: false, 
       appTitle: "BPA | ", 
       appName: "Business Process Automation", 
       apiUrl: `${URL}`, 
       packageUrl: `http://${HOSTNAME}:9090/assets/packages`, 
       mfa : {
           enabled: false, 
           otp_url: 'https://ssologon-prd.sm.bankofamerica.com/ssoconnect/sendOTP.html' 
       }, 
       sync: {
           groups: false, 
           users: false   
       },
       autoRefreshinterval: 60000, 
       showFormBuilderListltems: false, 
       deploymentType: "not_on_prem"
   };

Die Seitennavigation ist bereit zum Testen.

Hinzufügen einer neuen Route in MFE

1. Generieren Sie Komponenten der Kategorie 1 und 2.
2. Importieren Sie diese Komponenten in die Routing-Datei.

import { CompOneComponent } from './comp-one/comp-one.component'; 
import { CompTwoComponent } from './comp-two/comp-two. component';

3. Definieren Sie den Präfixpfad.

const includePath = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/ex')); 
let prefixPath = 'ex';
if (includePath.length > 1) {
    prefixPath = `${includePath}/${prefixPath}`
}

4. Definieren Sie die Routen. Platzieren Sie die Standardroute als letzte.

const routes: Routes = [
    { path: `$iprefixPath}/test-mfe/compone`, component: CompOneComponent },
    { path: `${prefixPath}/test-mfe/comptwo`, component: CompTwoComponent }, 
    { path: '**', component: EmptyRouteComponent }
];

5. Überprüfen Sie den vollständigen Code.

Rendering eines geschachtelten Menüs für benutzerdefinierte Anwendungen

Ein geschachteltes Menü kann aus einer benutzerdefinierten Anwendung gerendert werden. In diesem Abschnitt werden die erforderlichen Schritte zur Vorbereitung des MFE-Registrierungsdokuments beschrieben. Zu diesem Zweck wurden die folgenden Eigenschaften eingeführt:

• Ebene: Akzeptiert Zahlen, beginnend bei eins; Die Zahl erhöht sich je nach Anzahl der Menüs und mit zunehmender Stufe. niedrigere Ebenen sollten zuerst in BPA registriert werden
• Eltern: Speichert den Wert der übergeordneten display_name-Eigenschaft, unter der das aktuelle Menü angezeigt werden soll

Beispiel für ein geschachteltes Menü, das für die benutzerdefinierte Test MFE-MFE-Anwendung erstellt wurde:

So rendern Sie ein verschachteltes Menü:

1. Fügen Sie die richtigen Werte für die Ebene, den Pfad und die übergeordneten Eigenschaften hinzu.

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root", 
"type": "application", 
"display_name": "Test MFE", 
"menu_path": "Application", 
"custom": true, 
"default": false, 
"level": 1, 
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

Die Pfadeigenschaft sollte nicht vorhanden sein, wenn ein Menü über untergeordnete Menüs verfügt. Stufe 1 gibt an, dass dieses Menü zuerst registriert werden soll.

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root", 
"type": "application", 
"display_name": "Test MFE", 
"menu_path": "Application", 
"custom": true, 
"default": false, 
"level": 1, 
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

In der obigen Abbildung ist der übergeordnete Wert Test MFE. Daher ist das Menü Test MFE Level One unter dem Menü Test MFE verschachtelt.

Stufe 2

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/compone",
"display_name": "Test MFE One",
"menu_path": "Application",
"parents": "Test MFE",
"custom": true,
"default": false,
"level": 2,
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

Stufe 4

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/comptwo",
"display_name": "Test MFE Two",
"menu_path": "Application",
"parents": "Test MFE",
"custom": true,
"default": false,
"level": 4,
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

Stufe 5

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/compone",
"display_name": "Test MFE First one",
"menu_path": "Application",
"parents": "Test MFE Level One",
"custom": true,
"default": false,
"level": 5,
"distribution_path": "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

Das Menü Test MFE First One ist unter dem Menü Test MFE Level One verschachtelt.

Stufe 6

"layout_enabled": true,
"name": "@cisco-bpa-platform/test-mfe-root",
"type": "application",
"path": "ex/test-mfe/comptwo",
"display_name": "Test MFE First Two",
"menu_path": "Application",
"parents": "Test MFE Level One",
"custom": true,
"default": false,
"level": 6,
"distribution_path" : "/assets/cisco-bpa-platform/mw-device-manager/test-mfe/main.js", 
"version": "4.1.0-501"

Das Menü Test MFE First Two (Erste MFE testen) ist unter dem Menü Test MFE Level One verschachtelt.

Starten Sie nach dem Vorbereiten der Datei "mfe.json" in Schritt 1 den Microservice-Container neu, um die Einträge zu registrieren.