I8nangular

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to the sample angular app will be documented in this file.
 
+## 3.0.1
+
+- 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.
+
 ## 3.0.0
 
 - AI DISCLAIMER: This upgrade was performed with Claude Opus 4.6.

webClient/angular.json

@@ -17,18 +17,24 @@
             "tsConfig": "src/tsconfig.app.json",
             "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,
+              "sourceMap": { "scripts": true, "styles": true, "vendor": true },
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

webClient/package.json

@@ -1,6 +1,6 @@
 {
   "name": "org.zowe.zlux.sample.angular.webclient",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "scripts": {
     "start": "webpack --progress --watch",
     "build": "webpack --progress",
@@ -24,7 +24,7 @@
     "@angular/router": "~18.2.14",
     "@ngtools/webpack": "^18.2.14",
     "@zlux/widgets": "github:zowe/zlux-widgets#v3.x/master",
-    "angular-l10n": "16.0.0",
+    "angular-l10n": "~17.0.1",
     "codelyzer": "~6.0.2",
     "compression-webpack-plugin": "~11.0.0",
     "copy-webpack-plugin": "~11.0.0",

webClient/src/app/app.component.css

@@ -128,19 +128,27 @@ h1 {
   margin: 2px 2px;
 }
 
-.test-storage .row {
+.test-storage .storage-row {
   display: flex;
-  height: 1.8rem;
+  align-items: center;
+  min-height: 2rem;
 }
 
-.test-storage .row span{
+.test-storage .storage-row span {
   width: 4rem;
   flex: 0 0 auto;
   margin: 0.2rem 0;
 }
 
-.test-storage .row input,select {
+.test-storage .storage-row input,
+.test-storage .storage-row select {
   flex: 1 1 auto;
+  height: 2rem;
+  padding: 0.2rem 0.4rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: inherit;
+  box-sizing: border-box;
 }
 
 .test-storage .controls {

webClient/src/app/app.component.html

@@ -83,14 +83,14 @@
     </div>
     <div class="test-storage">
       <div class="bigger-bold-text" i18n="storageTest@@storageTestLabel">Storage Test</div>
-      <div class="row">
+      <div class="storage-row">
         <span i18n="server@@server">Server</span>
         <select [(ngModel)]="storageServer" (change)="storageServerChanged($any($event.target).value)">
           <option value='zss'>ZSS</option>
           <option value='app-server'>App Server</option>
         </select>
       </div>
-      <div class="row">
+      <div class="storage-row">
         <span i18n="storage@@storage">Storage</span>
         <select [(ngModel)]="storageType">
           <option [ngValue]="undefined">Default</option>
@@ -99,10 +99,10 @@
           <option value="local">Local</option>
         </select>
       </div>
-      <div class="row">
+      <div class="storage-row">
         <span i18n="key@@keyLabel">Key</span><input [(ngModel)]="storageKey">
       </div>
-      <div class="row">
+      <div class="storage-row">
         <span i18n="value@@valueLabel">Value</span><input [(ngModel)]="storageValue">
       </div>
       <div><ng-container i18n="status@@stoargeStatusLabel">Status:</ng-container> {{storageStatus}}</div>

webClient/webpack.config.js

@@ -31,7 +31,8 @@ var config = {
   },
   resolve: {
     alias: {
-      'zlux-widgets': path.resolve(__dirname, 'node_modules/@zlux/widgets')
+      '@zlux/widgets': path.resolve(__dirname, 'node_modules/@zlux/widgets/dist/zlux-widgets/fesm2022/zlux-widgets.mjs'),
+      'zlux-widgets': path.resolve(__dirname, 'node_modules/@zlux/widgets/dist/zlux-widgets/fesm2022/zlux-widgets.mjs')
     }
   },
   plugins: [