Sample Angular App V3 Upgrade

.github/workflows/build_test.yml

@@ -138,7 +138,7 @@ jobs:
       - name: '[Prep 3] Setup Node'
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 22
 
       - name: '[Prep 4] Setup jFrog CLI'
         uses: jfrog/setup-jfrog-cli@v2

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to the sample angular app will be documented in this file.
 
+## 3.0.0
+
+- Enhancement: i18n support aligned with Zowe v3 Desktop (zlux-app-manager PR #709).
+- Bumped angular-l10n from 16.0.0 to ~17.0.1 to match Desktop runtime and resolve Angular 18 peer dependency conflict.
+- Fixed @zlux/widgets webpack alias to point to ESM (.mjs) bundle for correct module resolution.
+- Added Angular locale asset copying in angular.json for locale file availability.
+- Enabled detailed source maps (scripts, styles, vendor) for improved debugging.
+- Upgraded to Angular 18.2.14 for Zowe V3 desktop compatibility.
+- Replaced ts-loader and angular2-template-loader with @ngtools/webpack for AOT compilation.
+- Switched webpack config to extend webpack5.base.js.
+- Updated output path to web/v3/ with versioned entryPoint in pluginDefinition.json.
+- Upgraded all dependencies: rxjs 7.8.1, typescript 5.4.5, zone.js 0.14.4, webpack 5.92.0.
+- Removed legacy loaders (html-loader, exports-loader, file-loader) and NODE_OPTIONS workaround.
+- Updated angular.json, removing deprecated options and using Angular 18 conventions.
+
 ## 2.0.1
 - Bugfix: Schema file was not included, preventing installation as a component
 - Bugfix: Manifest build content template was never resolved, so it has been removed.

bin/validate.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+
+#######################################################################
+# This program and the accompanying materials are made available
+# under the terms of the Eclipse Public License v2.0 which
+# accompanies this distribution, and is available at
+# https://www.eclipse.org/legal/epl-v20.html
+#
+# SPDX-License-Identifier: EPL-2.0
+#
+# Copyright Contributors to the Zowe Project.
+#######################################################################
+
+name="angular-sample"
+id="org.zowe.zlux.sample.angular"
+
+rc=0
+if [ "${ZWE_components_app_server_enabled}" != "true" ]; then
+  echo "${name} (${id}) cannot run because app-server is not enabled."
+  rc=1
+fi
+exit $rc

manifest.yaml

@@ -19,6 +19,8 @@ repository:
   type: git
   url: https://github.com/zowe/sample-angular-app.git
 # we do not specify encoding here because its already tagged ascii
+commands:
+  validate: bin/validate.sh
 appfwPlugins:
   - path: .
 schemas:

pluginDefinition.json

@@ -11,13 +11,17 @@
     "launchDefinition": {
       "pluginShortNameKey": "sampleangular",
       "pluginShortNameDefault": "Angular Sample",
-      "imageSrc": "assets/icon.png"
+      "imageSrc": "v3/assets/icon.png"
     },
     "descriptionKey": "sampleangulardescription",
     "descriptionDefault": "Sample App Showcasing Angular Adapter",
     "defaultWindowStyle": {
       "width": 850,
       "height": 540
+    },
+    "entryPoint": {
+      "2.0": "main.js",
+      "3.0": "v3/main.js"
     }
   },
   "dataServices": [

schemas/trivial-schema.json

@@ -1,6 +1,6 @@
 {  
   "$schema": "https://json-schema.org/draft/2019-09/schema",
-  "$id": "https://abcdef.com/schemas/v2/sample-angular",
+  "$id": "https://zowe.org/schemas/v2/angular-sample",
   "allOf": [
     { "$ref": "https://zowe.org/schemas/v2/server-base" },
     { 
@@ -10,7 +10,7 @@
           "type": "object",
           "additionalProperties": true,
           "properties": {  
-            "sample-angular": {
+            "angular-sample": {
               "$ref": "https://zowe.org/schemas/v2/server-base#zoweComponent"
             }
           }

webClient/angular.json

@@ -15,24 +15,27 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
-              "src/favicon.ico"
+              "src/favicon.ico",
+              {
+                "glob": "**/*",
+                "input": "node_modules/@angular/common/locales",
+                "output": "locales"
+              }
             ],
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "sourceMap": { "scripts": true, "styles": true, "vendor": true }
           },
           "configurations": {
             "production": {
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
+              "sourceMap": { "scripts": true, "styles": true, "vendor": true },
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -48,27 +51,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "mvd-plugin-name:build"
+            "buildTarget": "mvd-plugin-name:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "mvd-plugin-name:build:production"
+              "buildTarget": "mvd-plugin-name:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "mvd-plugin-name:build"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json"
-            ],
-            "exclude": []
+            "buildTarget": "mvd-plugin-name:build"
           }
         }
       }
@@ -79,11 +73,10 @@
       "projectType": "application"
     }
   },
-  "defaultProject": "mvd-plugin-name",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "css"
+      "style": "css"
     },
     "@schematics/angular:directive": {
       "prefix": "app"