WIP on getting app-prop-viewer to load. Seems to get to component now…

…, but no visual

Signed-off-by: 1000TurquoisePogs <[email protected]>

system-apps/app-prop-viewer/webClient/package.json

@@ -2,42 +2,43 @@
   "name": "org.zowe.zlux.appmanager.app.propview.webclient",
   "version": "2.0.0",
   "scripts": {
-    "start": "webpack --progress --colors --watch",
-    "build": "webpack --progress --colors",
+    "start": "webpack --progress --watch",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --progress",
     "i18n": "ng-xi18n -p tsconfig.i18n.json --i18nFormat=xlf  --outFile=messages.xlf",
     "lint": "tslint -c tslint.json \"./**/*.ts\""
   },
   "license": "EPL-2.0",
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.0",
-    "@angular/animations": "~12.0.0",
-    "@angular/cli": "~12.0.0",
-    "@angular/common": "~12.0.0",
-    "@angular/compiler": "~12.0.0",
-    "@angular/compiler-cli": "~12.0.0",
-    "@angular/core": "~12.0.0",
-    "@angular/forms": "~12.0.0",
-    "@angular/language-service": "~12.0.0",
-    "@angular/platform-browser": "~12.0.0",
-    "@angular/platform-browser-dynamic": "~12.0.0",
-    "@angular/router": "~12.0.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/animations": "~18.0.0",
+    "@angular/cli": "~18.0.0",
+    "@angular/common": "~18.0.0",
+    "@angular/compiler": "~18.0.0",
+    "@angular/compiler-cli": "~18.0.0",
+    "@angular/core": "~18.0.0",
+    "@angular/forms": "~18.0.0",
+    "@angular/language-service": "~18.0.0",
+    "@angular/platform-browser": "~18.0.0",
+    "@angular/platform-browser-dynamic": "~18.0.0",
+    "@angular/router": "~18.0.0",
+    "@ngtools/webpack": "^18.0.0",
     "angular2-template-loader": "~0.6.2",
+    "babel-loader": "^9.1.3",
     "codelyzer": "~6.0.2",
-    "copy-webpack-plugin": "~5.1.2",
+    "copy-webpack-plugin": "~12.0.2",
     "core-js": "~3.19.0",
-    "css-loader": "~3.6.0",
-    "exports-loader": "~0.7.0",
-    "html-loader": "~0.5.5",
-    "rxjs": "~6.6.0",
-    "rxjs-compat": "~6.2.2",
-    "source-map-loader": "~1.1.3",
-    "ts-loader": "~8.3.0",
+    "css-loader": "~7.1.1",
+    "exports-loader": "~5.0.0",
+    "html-loader": "~4.2.0",
+    "rxjs": "~7.8.1",
+    "source-map-loader": "~3.0.0",
+    "ts-loader": "~9.5.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.2.0",
-    "url-loader": "2.3.0",
-    "webpack": "~4.46.0",
-    "webpack-cli": "~3.3.0",
+    "typescript": "~5.4.5",
+    "url-loader": "4.1.1",
+    "webpack": "~5.91.0",
+    "webpack-cli": "~5.1.4",
     "webpack-config": "~7.5.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.4"
   }
 }

system-apps/app-prop-viewer/webClient/webpack.config.js

@@ -27,17 +27,17 @@ var config = {
     'filename': 'main.js',
   },
   'plugins': [
-    new CopyWebpackPlugin([
-      {
+    new CopyWebpackPlugin({
+      patterns: [{
         from: path.resolve(__dirname, './src/assets'),
         to: path.resolve('../web/assets')
-      }
-    ])
+      }]
+    })
   ]
 };
 
 module.exports = new webpackConfig.Config()
-  .extend(path.resolve(process.env.MVD_DESKTOP_DIR, 'plugin-config/webpack.base.js'))
+  .extend(path.resolve(process.env.MVD_DESKTOP_DIR, 'plugin-config/webpack5.base.js'))
   .merge(config);
 
 

virtual-desktop/.gitignore

@@ -22,6 +22,7 @@
 
 # IDEs and editors
 /.idea
+.angular/
 .project
 .classpath
 .c9/

virtual-desktop/angular.json

@@ -56,7 +56,7 @@
               "sourceMap": true
             }
           },
-          "defaultConfiguration": "production"
+          "defaultConfiguration": "development"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -95,5 +95,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
-}
+}

virtual-desktop/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "build:externals": "webpack --progress --config webpack.externals.js",
     "start": "webpack --watch --progress",
-    "build": "webpack --progress",
+    "build": "ng build",
     "i18n": "ng-xi18n -p tsconfig.ngx-i18n.json --i18nFormat=xlf  --outFile=messages.xlf && xliffmerge -p xliffmerge.json",
     "lint": "tslint -c tslint.json \"src/**/*.ts\""
   },
@@ -77,4 +77,4 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7"
   }
-}
+}

virtual-desktop/plugin-config/webpack5.base.js

@@ -15,7 +15,7 @@ const desktopDir = path.resolve(__dirname, '..');
 
 const config = {
   devtool: 'source-map',
-  mode: 'production',
+  mode: 'development',
   output: {
     libraryTarget: 'umd',
     umdNamedDefine: true

virtual-desktop/src/app/application-manager/application-manager.service.ts

@@ -49,6 +49,7 @@ export class ApplicationManager implements MVDHosting.ApplicationManagerInterfac
     // private compiler: Compiler,
     private languageLocaleService: LanguageLocaleService,
     private http: HttpClient,
+    private environmentInjector: EnvironmentInjector
   ) {
     // this.failureModuleFactory = this.compiler.compileModuleSync(FailureModule);
     this.applicationInstances = new Map();

virtual-desktop/src/app/plugin-manager/plugin-factory/angular2/angular2-plugin-factory.ts

@@ -10,14 +10,11 @@
   Copyright Contributors to the Zowe Project.
 */
 
-import { createComponent, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { PluginFactory } from '../plugin-factory';
 import { CompiledPlugin, CompiledPluginCustom } from '../../shared/compiled-plugin';
-import { ApplicationRef, Injector } from '@angular/core';
-import { from, Observable } from 'rxjs';
 
-import { ComponentFactory } from 'zlux-base/registry/registry';
 import { TranslationLoaderService } from '../../../i18n/translation-loader.service';
 import { BaseLogger } from 'virtual-desktop-logger';
 
@@ -26,70 +23,16 @@ interface MvdNativeAngularPlugin {
   pluginComponent: any;
 }
 
-interface MvdNativeAngularComponent {
-  componentNgModule: any;
-  componentNgComponent: any;
-}
-
-interface AngularComponentFactoryDefinition {
-  componentScriptUrl: string;
-  componentClass: ZLUX.ComponentClass;
-  capabilities: ZLUX.Capability[];
-}
-
-interface MvdNativeAngularPluginComponentDefinition {
-  getComponentFactoryDefinitions(pluginDefinition: MVDHosting.DesktopPluginDefinition): AngularComponentFactoryDefinition[];
-}
-
-class SimpleAngularComponentFactory extends ComponentFactory {
-  private readonly logger: ZLUX.ComponentLogger = BaseLogger;
-  constructor(
-    // private compiler: Compiler,
-    private applicationRef: ApplicationRef,
-    private injector: Injector,
-    private componentModulePath: string,
-    componentClass: ZLUX.ComponentClass,
-    capabilities: ZLUX.Capability[]
-  ) {
-    super(componentClass, capabilities);
-  }
-
-  instantiateIntoDOM(target: any): Observable<any> {
-    const promise: Promise<any> = new Promise((resolve, reject) => {
-      (window as any).require([this.componentModulePath],
-        (fullPlugin: MvdNativeAngularComponent) => {
-          this.logger.debug("ZWED5314I", fullPlugin); //this.logger.debug(`Instantiating into DOM=`,fullPlugin);
-          const componentRef = createComponent<any>(fullPlugin.componentNgComponent, {
-            environmentInjector: this.applicationRef.injector,
-            elementInjector: this.injector
-          });
-          resolve(componentRef.instance as any);
-        },
-        (failure: any) => {
-          reject();
-        });
-    });
-
-    return from(promise);
-  }
-}
-
 @Injectable()
 export class Angular2PluginFactory extends PluginFactory {
   private readonly logger: ZLUX.ComponentLogger = BaseLogger;
   private static getAngularModuleURL(pluginDefinition: MVDHosting.DesktopPluginDefinition): string {
     return ZoweZLUX.uriBroker.pluginResourceUri(pluginDefinition.getBasePlugin(), 'main.js');
   }
 
-  private static getAngularComponentsURL(pluginDefinition: MVDHosting.DesktopPluginDefinition): string {
-    return ZoweZLUX.uriBroker.pluginResourceUri(pluginDefinition.getBasePlugin(), 'components.js');
-  }
-
   constructor(
     // private compilerFactory: CompilerFactory,
     // private compiler: Compiler,
-    private applicationRef: ApplicationRef,
-    private injector: Injector,
     private translationLoaderService: TranslationLoaderService
   ) {
     super();
@@ -99,38 +42,7 @@ export class Angular2PluginFactory extends PluginFactory {
     return ['angular2', 'angular'];
   }
 
-  loadComponentFactories(pluginDefinition: MVDHosting.DesktopPluginDefinition): Promise<void> {
-    const scriptUrl = Angular2PluginFactory.getAngularComponentsURL(pluginDefinition);
-
-    return new Promise((resolve, reject) => {
-      if (pluginDefinition.hasComponents()) {
-        (window as any).require([scriptUrl],
-          (components: MvdNativeAngularPluginComponentDefinition) => {
-            const factoryDefs = components.getComponentFactoryDefinitions(pluginDefinition);
-            factoryDefs.forEach((factory: AngularComponentFactoryDefinition) => {
-              const componentFactory = new SimpleAngularComponentFactory(this.applicationRef, this.injector,
-                factory.componentScriptUrl, factory.componentClass, factory.capabilities);
-
-              this.logger.info(`ZWED5051I`, pluginDefinition.getIdentifier()); //this.logger.info(`Registering component factory for plugin=${pluginDefinition.getIdentifier()}:`);
-              this.logger.debug("ZWED5306I", componentFactory); //this.logger.debug(componentFactory);
-
-              ZoweZLUX.registry.registerComponentFactory(componentFactory);
-
-              resolve();
-            });
-          },
-          (failure: any) => {
-            this.logger.warn("ZWED5164W", pluginDefinition.getIdentifier()); //this.logger.warn(`No component definition for plugin ${pluginDefinition.getIdentifier()}`);
-            resolve();
-          });
-      } else {
-        resolve();
-      }
-    });
-  }
-
   loadPlugin(pluginDefinition: MVDHosting.DesktopPluginDefinition, instanceId: MVDHosting.InstanceId): Promise<CompiledPlugin | CompiledPluginCustom> {
-    this.loadComponentFactories(pluginDefinition);
     const scriptUrl = Angular2PluginFactory.getAngularModuleURL(pluginDefinition);
 
     this.logger.info(`ZWED5052I`, pluginDefinition.getIdentifier(), scriptUrl); //this.logger.info(`Loading Angular Plugin ID=${pluginDefinition.getIdentifier()}, URL=${scriptUrl}`);

virtual-desktop/src/app/plugin-manager/plugin-factory/plugin-factory.ts

@@ -16,7 +16,6 @@ import { CompiledPlugin, CompiledPluginCustom } from '../shared/compiled-plugin'
 export abstract class PluginFactory {
   abstract acceptableFrameworks(): string[];
   abstract loadPlugin(plugin: MVDHosting.DesktopPluginDefinition, id: MVDHosting.ViewportId): Promise<CompiledPlugin | CompiledPluginCustom>;
-  abstract loadComponentFactories(plugin: MVDHosting.DesktopPluginDefinition): Promise<void>;
 }
 
 

virtual-desktop/src/app/plugin-manager/shared/plugin-loader.ts

@@ -12,7 +12,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { CompiledPlugin } from './compiled-plugin';
+import { CompiledPlugin, CompiledPluginCustom } from './compiled-plugin';
 // import { DesktopPluginDefinition } from './desktop-plugin-definition';
 import { PluginFactory } from '../plugin-factory/plugin-factory';
 import { Angular2PluginFactory } from '../plugin-factory/angular2/angular2-plugin-factory';
@@ -47,7 +47,7 @@ export class PluginLoader {
     });
   }
 
-  loadPlugin(pluginDefinition: MVDHosting.DesktopPluginDefinition, instanceId: MVDHosting.InstanceId): Promise<CompiledPlugin | null> {
+  loadPlugin(pluginDefinition: MVDHosting.DesktopPluginDefinition, instanceId: MVDHosting.InstanceId): Promise<CompiledPlugin | CompiledPluginCustom | null> {
     const candidateFactories = this.frameworkMap.get(pluginDefinition.getFramework()) || [];
     if (pluginDefinition.getFramework() === 'unsupported') {
       return new Promise((resolve, reject) => {
@@ -68,29 +68,6 @@ export class PluginLoader {
       Promise.reject([new Error(`ZWED5152E - All plugin factories for framework type "${pluginDefinition.getFramework()}" failed`)])
     );
   }
-
-  loadPluginComponentFactories(pluginDefinition: MVDHosting.DesktopPluginDefinition): Promise<void> {
-    const candidateFactories = this.frameworkMap.get(pluginDefinition.getFramework()) || [];
-
-    if (pluginDefinition.getFramework() === 'unsupported') {
-      return new Promise((resolve, reject) => {
-        this.logger.warn("ZWED5176W", pluginDefinition.getIdentifier()); //this.logger.warn(`${pluginDefinition.getIdentifier()} does not use supported framework`);
-        resolve();
-      });
-    } else if (pluginDefinition.getFramework() === 'n/a') {
-      return new Promise((resolve, reject) => {
-        resolve();
-      });
-    }
-
-    /* Attempt all registered factories for the given framework */
-    return candidateFactories.reduce(
-      (promise, factory) => promise.catch((errors: any[]) =>
-        factory.loadComponentFactories(pluginDefinition).catch((error) => Promise.reject(errors.concat([error])))
-      ),
-      Promise.reject([new Error(`ZWED5153E - All plugin factories for framework type "${pluginDefinition.getFramework()}" failed`)])
-    );
-  }
 }
 
 

virtual-desktop/src/app/plugin-manager/shared/plugin-manager.ts

@@ -13,7 +13,6 @@
 import { Injectable, EventEmitter } from '@angular/core';
 
 import { DesktopPluginDefinitionImpl } from './desktop-plugin-definition';
-import { PluginLoader } from './plugin-loader';
 
 const SCAN_INTERVAL_MINIMUM = 300000;
 
@@ -25,7 +24,6 @@ export class PluginManager implements MVDHosting.PluginManagerInterface, MVDHost
   public pluginsAdded: EventEmitter<MVDHosting.DesktopPluginDefinition[]> = new EventEmitter();
 
   constructor(
-    private pluginLoader: PluginLoader
   ) {
   }
 
@@ -74,7 +72,6 @@ export class PluginManager implements MVDHosting.PluginManagerInterface, MVDHost
         }
         const pluginDefs = plugins.map(plugin => new DesktopPluginDefinitionImpl(plugin));
         pluginDefs.forEach((plugin) => PluginManager._pluginDefinitions.set(plugin.getIdentifier(), plugin));
-        pluginDefs.forEach((plugin) => this.pluginLoader.loadPluginComponentFactories(plugin));
         if (pluginDefs.length > 0) {
           this.pluginsAdded.emit(pluginDefs);
         }