App Module

AppModule

(app.module.ts)

The one of the most crucial part of the entire application is the AppModule which is loaded first as soon as the application begins. And inturn responsible for the loading the components and responsible for the handling the major functions like downgrading and upgrading the components for easier functioning of the hybrid application few of the most import functions provided down here.

ngDoBootstrap Method:

async ngDoBootstrap() {
  this.checkBrowser();
  await this.loadConfigs();
  this.env = window.__env || {};
  this.downgradeDependencies();
  await this.initKomMonitorClientModule();
  await this.initKeycloak();
  this.upgrade.bootstrap(document.documentElement, ['kommonitorClient']);
}

this.downgradeDependencies();:

This function is responsible for downgrading Angular components, making them compatible with AngularJS, and registering them as AngularJS directives.

this.upgrade.bootstrap(document.documentElement, ['kommonitorClient']);:

This line uses ngUpgrade to bootstrap the Angular application. It specifies the root element (document.documentElement) and the Angular module (kommonitorClient) to bootstrap.

DowngradeDependencies Method:

This method is responsible for downgrading Angular components to make them compatible with an AngularJS application. It uses the downgradeComponent function to register these downgraded components as AngularJS directives within the kommonitorUserInterface AngularJS module.This is necessary because for both AngularJS and Angular components to coexist.

private downgradeDependencies(): void {  
   angular.module('kommonitorUserInterface')
     .directive('infoModal',  downgradeComponent({ component: InfoModalComponent }) as angular.IDirectiveFactory);
   
   angular.module('kommonitorUserInterface')
     .directive('versionInfo',  downgradeComponent({ component: VersionInfoComponent }) as angular.IDirectiveFactory);
   
   // ... Other components are downgraded similarly
   
   console.log("registered downgraded Angular components for AngularJS usage");
}

Note:

For every component we create we need to first import the component and then pass them to declaration and later on pass downgrade the component angular-directive as per the code snippet given below

import { DoBootstrap, NgModule, Version } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { downgradeComponent } from '@angular/upgrade/static';
import { InfoModalComponent } from 'components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component';
import { VersionInfoComponent } from 'components/kommonitorUserInterface/kommonitorControls/versionInfo/version-info.component';
import { KommonitorDiagramsComponent } from 'components/kommonitorUserInterface/kommonitorControls/kommonitorDiagrams/kommonitor-diagrams.component';
import { IndicatorRadarComponent } from 'components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar';

@NgModule({
    imports: [],
    providers:[],
    declarations: [
      InfoModalComponent,
      VersionInfoComponent,
      KommonitorDiagramsComponent,
      IndicatorRadarComponent,
      RegressionDiagramComponent
  
    ]
  })


  private downgradeDependencies(): void {  

    // to inject already upgraded KomMonitor Angular components into "old" AngluarJS components, we must do 2 things
    // 1. downgrade the new Angular component and register it as directive within each requiring AngularJS module/component
    //    --> this especially means all components, where the downgraded component is used within the HTML part as directive
    // 2. in order to prevent no module errors we must remove the old module reference within the .module file of the AngularJS modules/components 

    angular.module('kommonitorUserInterface')
  .directive(/*'component-selector-name'*/,  downgradeComponent({ component:/*MentiontheComponentName */}) as angular.IDirectiveFactory);
    angular.module('kommonitorUserInterface')
    .directive('kommonitor-diagram',  downgradeComponent({ component: KommonitorDiagramsComponent }) as angular.IDirectiveFactory);
    
    console.log("registered downgraded Angular components for AngularJS usage");
  }

InitKomMonitorClientModule Method:

This method configures the kommonitorClient AngularJS module ,It defines a MathJax directive, allowing MathJax expressions to be rendered SPA routing using the $routeProvider to define different routes within the application and interceptor (authInterceptor) to refresh Keycloak authentication tokens on each user request.

private initKomMonitorClientModule(): void {
   // Register environment in AngularJS as constant
   angular.module('kommonitorClient').constant('__env', window.__env);

   // MathJx directive
   angular.module('kommonitorClient').directive("mathjaxBind", function () {
      // ... MathJax directive implementation
   });

   // custom unique filter
   angular.module('kommonitorClient').filter('unique', function () {
      // ... Unique filter implementation
   });

   // init/configure SPA routing
   angular.module('kommonitorClient').
      config(['$routeProvider', '$locationProvider',
         function config($routeProvider, $locationProvider) {
            // ... Route configuration
         }
      ]);

   // register auth interceptor to refresh Keycloak login on each user request
   angular.module('kommonitorClient').factory('authInterceptor', ['$q', 'Auth', function ($q, Auth) {
      // ... Auth interceptor implementation
   }]);

   angular.module('kommonitorClient').config(['$httpProvider', function ($httpProvider) {
      $httpProvider.interceptors.push('authInterceptor');
   }]);
}

InitKeycloak Method:

This method initializes Keycloak authentication.It creates a Keycloak instance using the provided Keycloak configuration.If initialization is successful, it sets up the auth.keycloak object and configures it.

private async initKeycloak(): Promise<any> {
   let auth = {
      keycloak: {}
   };

   if (window.__env.enableKeycloakSecurity) {
      var keycloakAdapter = new Keycloak(window.__env.configStorageServerConfig.targetUrlToConfigStorageServer_keycloakConfig);

      return await keycloakAdapter.init({
         // ... Keycloak initialization options
      }).then(function (authenticated) {
         // ... Keycloak initialization handling
      }).catch(function () {
         // ... Keycloak initialization error handling
      });
   }
}