Integrate Quantum Components in Angular Apps

From the V9 Service Pack 4 release, you can integrate the Quantum Framework with Angular apps to embed Components from Quantum Visualizer with Angular Components as Webpack 5 modules.

In the V9 Service Pack 5 release, further updates have been made in the Quantum Framework to enable modularization, message bus, and other events.

Prerequisites

Before you start integrating Quantum Visualizer with Angular apps, ensure that you have the following resources:

  • Knowledge of the Angular Framework.
  • Knowledge of modularization using Webpack 5.
  • A working Angular project with at least one integrated Micro Front End (MFE) app.

Integrate Quantum Visualizer Components with Angular Components

Follow these steps to integrate Quantum Visualizer Components with Angular Components:

  1. Create the Quantum Visualizer Component
  2. Setup the Quantum Micro Front End (MFE) App
  3. Create the Quantum Micro Front End (MFE) Components
  4. Configure the Webpack 5 Module
  5. Integrate the Quantum Micro Front End (MFE) Components with the Angular App
  6. Enable Communication between the Components

Create the Quantum Visualizer Component

Follow these steps to create the Quantum Visualizer Components:

  1. Create a Quantum Visualizer project for the Web platform
  2. Create a Quantum Visualizer Component
  3. Publish the Quantum Visualizer app to Quantum Fabric

You have successfully created a Quantum Visualizer component and published the Quantum Visualizer app to Quantum Fabric.

Setup the Quantum Micro Front End App

Follow these steps to configure the Quantum Micro Front End App:

  1. Create an Angular Micro Front End App with the name Quantum, and integrate it with the Angular project that you had created as part of the prerequisite (the main Shell app).
    • An app.module file is created in the Quantum Micro Front End App, by default.
      Update the name of the file to quantum-app.module, and provide the class name as QuantumAppModule.
      This app is the root module that enables you to run a Quantum Micro Front End App as a standalone app.
    • An app.component file is also created in the Quantum Micro Front End App, by default.
      Update the name of the file to quantum-app.component, and provide the class name as QuantumAppComponent.
  2. Create a constants file in the Quantum Micro Front End App, and name it quantum-constants.
  3. In the quantum-constants file, add a code snippet from the Snippet section, and modify the key-value pairs with valid details.
  4. In the Quantum Micro Front End App, create an Angular Service with the name quantum.service, and provide the class name as QuantumService.
  5. In the quantum.service file, add the code snippet from the Snippet section.
  6. In the Quantum Micro Front End App, create an Angular Resolver, and add the code snippet from the Snippet section.
  7. In the Quantum Micro Front End App, create an Angular app routes file with the name quantum-app.routes, and provide the class name as QUANTUM_APP_ROUTES.
    You can use these routes to execute standalone routing components.
  8. In the QUANTUM_APP_ROUTES file, add the code snippet from the Snippet section.
  9. In the Quantum Micro Front End App, create an Angular Module with the name quantum-mfe.module.ts, and provide the class name as QuantumMfeModule.
  10. In the QuantumMfeModule file, add the code snippet from the Snippet section.
  11. In the Quantum Micro Front End App, create an Angular app routes file with the name quantum-mfe.routes, and provide the class name as QUANTUM_MFE_ROUTES.
    You can use these routes to execute MFE routing components.
  12. In the QUANTUM_MFE_ROUTES file, add a code snippet from the Snippet section.
  13. In the quantum-app.module file, add a code snippet from the Snippet section.

You have successfully set up the Quantum Micro Front End App.

Create the Quantum Micro Front End Components

This section provides details on embedding the Quantum Visualizer components (with and without contract) into Angular apps. To integrate Quantum Visualizer components with Angular components, you must create an angular component that contains a placeholder in the HTML code.

When you follow the steps mentioned in the Create the Quantum Visualizer Component section, a new component instance is created in the Component class. The kony.ui.renderTo API then renders the component and the placeholder.

NOTE: Ensure that you maintain unique class names for the component and placeholder to avoid any conflicts that may arise.

Follow these steps to create the Quantum Micro Front End Components:

  1. Create an Angular component and name it quantum-with-contract.component.
  2. Provide the class name as QuantumWithContract, and add the code snippet from the code snippet section of the Quantum Micro Front End component.
  3. In the declaration section under QuantumMfeModule, add the Angular component that you created in Step 2.
  4. To enable routing, add the Angular component that you created in Step 2 in the QUANTUM_MFE_ROUTES field.
  5. Repeat the same steps to create an Angular component for a component without contract with the name quantum-with-out-contract.component.

You have successfully created Quantum Micro Front End Components with and without contract.

Configure the Webpack 5 Module

This section provides details on configuring the Quantum Visualizer - Webpack module. The Quantum-Webpack Configuration is used to expose the Quantum MFE Components and modules that can be used in the Angular project (to retrieve them dynamically).

To configure the Webpack 5 Module, follow these steps:

  1. In Quantum Visualizer, copy the code snippet of the webpack.config file, and modify the key-value pairs with valid details.
  2. In the Angular project, add an entry to the Remote section under the webpack.config file.

You have successfully configured the Webpack 5 Module.

Integrate the Quantum Micro Front End Components with the Angular App

To dynamically render the Quantum Micro Front End (MFE) Components when the Angular App loads, follow these steps:

  1. Ensure that you create a remote entry for Quantum Micro Front End Components by following the steps in the Configure the Webpack 5 Module section.
  2. Create a new file (or use an existing file) with the name dec.d.ts, and declare the Quantum Visualizer modules and components.
  3. Navigate to the Routes section in the Angular project, and load the modules in the routing section including the Quantum Visualizer components in the Components section, if required.

You have successfully integrated the Quantum Micro Front End Components with the Angular App.

Enable Communication between the Components

After integrating the Quantum Micro Front End Components with the Angular App, you must configure a communication channel between the components (Quantum Component-Angular Component, Angular Component-Angular Component, and Quantum Component-Quantum Component). To enable communication between the components, Quantum Visualizer has introduced support for the following kony.listener APIs:

Sample Code Snippets

QuantumApp Module:

"@NgModule({
imports: [
HttpClientModule,
BrowserModule,
QuantumMfeModule,
RouterModule.forRoot(QUANTUM_APP_ROUTES)
],
declarations: [
QuantumAppComponent,
],
providers: [QuantumResolver],
bootstrap: [
QuantumAppComponent
]
})
export class QuantumAppModule { }"

Quantum Constants:

"export class QUANTUM_CONSTANTS{
public static KOF_URL: string = "http://{fabric_url}:{port}/"
public static KOF_APP_NAME: string = "VIZ_QUANTUM_APP_NAME"
}"

Quantum Service:

"@Injectable({
providedIn: 'root'
})
export class QuantumService {
public href: string = "";
public client: any;

constructor(private http: HttpClient) { }

QuantumInitialized() {
var ele = document.querySelector('[kr="app_dialogs"]');
if (ele) {
return true;
};
return false;
}

initQuantumServices(): Observable<any> {
var kof = {
appName: QUANTUM_CONSTANTS.KOF_APP_NAME,
fabricUrl: QUANTUM_CONSTANTS.KOF_URL,
cacheId: ''
};

if (this.QuantumInitialized()) {
return of("Quantum Loaded.");
} else {
return this.http.get<any>(kof.fabricUrl + '/apps/' + kof.appName + '/meta.json').pipe(map(data => {
kof.cacheId = data.appconfig.cacheId;
window["kof"] = kof;
})).pipe(map(() => {

this.href = kof.fabricUrl + '/apps/' + kof.appName + "/" + kof.cacheId + "/desktopweb/lib/konyinit.js"
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.href
script.async = true;
script.onerror = function (err) {
return throwError("Quantum Services failed to load." + err);
};

document.getElementsByTagName('head')[0].appendChild(script);

return of("Quantum Services Triggered.");
}));
}
}
}"

Quantum Resolver:

"
@Injectable()
export class QuantumResolver implements Resolve<any> {

constructor(private QuantumServices: QuantumService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
const withError = route.params['with-error'] === 'true';

return this.QuantumServices.initQuantumServices();

}

}"

Quantum App Routes:

"export const QUANTUM_APP_ROUTES: Routes = [
{ 
path: '', component: QuantumWithOutContract, 
pathMatch: 'full', 
resolve: { messages: QuantumResolver }
},
{
path: 'quantum-comp',
component: QuantumWithContract, resolve: { messages: QuantumResolver }
},
{
path: 'quantum-header',
component: QuantumWithOutContract, resolve: { messages: QuantumResolver }
},

];"

Quantum MFE routes:

"export const QUANTUM_MFE_ROUTES: Routes = [
{
path: 'quantum-mfe', resolve: { messages: QuantumResolver }, children: [
{
path: 'quantum-comp',
component: QuantumWithOutContract
},
{
path: 'quantum-header',
component: QuantumWithOutContract
}
]
}];"

Quantum MFE Module:

"@NgModule({
imports: [
CommonModule,
HttpClientModule,
BrowserModule,
RouterModule.forChild(QUANTUM_MFE_ROUTES)
],
declarations: [
QuantumWithContract,
],
providers:[QuantumService,QuantumResolver]
})
export class QuantumMfeModule {
}"

Quantum Component (with/without contract):

html:
"<div (click)="getElement()"> Click here </div>
<div class="one" id="one" #one></div>
"
ts: 
Add this method in the "component.ts" file
Ensure that you declare a component under the import section before using it. For example, 'declare const quantum'.
"
getElement() {
this.QuantumComp = new Quantum.Comp({
"autogrowMode": kony.flex.AUTOGROW_NONE,
"height": "730px",
"id": "Comp",
"isVisible": true,
"layoutType": kony.flex.FREE_FORM,
"left": "0dp",
"masterType": constants.MASTER_TYPE_DEFAULT,
"isModalContainer": false,
"skin": "slFbox",
"top": "0dp",
"width": "1350px",
"appName": "Segement",
"overrides": {
"Comp": {
"height": "115.53%",
"width": "105.42%"
}
}
}, {
"paddingInPixel": false,
"overrides": {}
}, {
"overrides": {}
});

kony.ui.renderTo(this.QuantumComp,"one");
}"

NOTE: Modify the new Quantum.Comp statement according to the definition of the component in Quantum Visualizer.

Important Considerations

While integrating Quantum Visualizer with Angular Apps, you must follow these guidelines:

  • Temenos recommends that you maintain the CSS of the placeholder at an absolute or relative position.
  • Temenos recommends that you expose a Module in the Quantum Webpack module sections instead of exposing a Component.
  • The Quantum loaded method must be invoked from the Quantum Service to check if the service has been initialized.
  • The Quantum Micro Front End components in the Quantum Angular app must be loaded only when Quantum is Initialized.
    You can use the QuantumInitialized method to verify if Quantum has been initialized.
  • The resize events are not invoked in the Quantum_Angular feature.