IAC-796 Upgrade VCD archetype to support Angular 15

Signed-off-by: Vladislav Ganev <[email protected]>

CHANGELOG.md

@@ -1,3 +1,5 @@
+* [artifact-manager] IAC-796 / Upgrade VCD archetype to support Angular 15
+
 ## v2.35.2
 ### Enhancements
 * [artifact-manager] IAC-786 / Set Aria Operations Default Policy vROPs 8.12.x.

maven/archetypes/vcd-ng/src/main/resources/META-INF/maven/archetype-metadata.xml

@@ -38,25 +38,26 @@
             <includes>
                 <include>pom.xml</include>
 				<include>package.json</include>
+				<include>angular.json</include>
             </includes>
-        </fileSet>
+        </fileSet>  
         <fileSet filtered="true" packaged="false" encoding="UTF-8">
-            <directory>libs</directory>
+            <directory>src</directory>
             <includes>
                 <include>**/*</include>
             </includes>
         </fileSet>
         <fileSet filtered="true" packaged="false" encoding="UTF-8">
-            <directory>src</directory>
+            <directory>license_data</directory>
             <includes>
                 <include>**/*</include>
             </includes>
-        </fileSet>
-        <fileSet filtered="true" packaged="false" encoding="UTF-8">
-            <directory>license_data</directory>
+        </fileSet>    
+        <fileSet filtered="false" packaged="false" encoding="UTF-8">
+            <directory>scripts</directory>
             <includes>
                 <include>**/*</include>
             </includes>
-        </fileSet>        
+        </fileSet>    
     </fileSets>
 </archetype-descriptor>

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/.gitignore

@@ -47,3 +47,6 @@ Thumbs.db
 
 # awesome-typescript-loader cache
 .awcache/
+
+# angular files
+.angular

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/angular.json

@@ -0,0 +1,75 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "uiPlugin": {
+            "projectType": "library",
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "lib",
+            "architect": {
+                "build": {
+                    "builder": "@vcd/plugin-builders:plugin-builder",
+                    "options": {
+                        "modulePath": "src/main/${projectName}.module.ts#${projectHeading}Module",
+                        "outputPath": "target/bundle",
+                        "index": "src/main/index.html",
+                        "main": "src/main/${projectName}.main.ts",
+                        "tsConfig": "tsconfig.json",
+                        "assets": [{
+                            "glob": "**/*",
+                            "input": "./src/public",
+                            "output": "/"
+                        }],
+                        "optimization": false,
+                        "outputHashing": "all",
+                        "sourceMap": false,
+                        "extractCss": false,
+                        "namedChunks": false,
+                        "aot": false,
+                        "extractLicenses": false,
+                        "vendorChunk": false,
+                        "buildOptimizer": false
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "uiPlugin:build",
+                        "proxyConfig": ".env/proxy.conf.runtime.json"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "uiPlugin:build:production"
+                        }
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "tsconfig.lib.json",
+                            "tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "uiPlugin",
+    "cli": {
+      "analytics": false
+    }
+}

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/package.json

@@ -1,68 +1,37 @@
 {
-  "name": "${projectHeading}",
-  "version": "1.0.0",
-  "description": "",
-  "scripts": {
-    "clean": "rimraf target",
-    "build": "webpack"
-  },
-  "license": "VMware Confidential",
-  "dependencies": {
-    "@angular-devkit/core": "8.3.19",
-    "@angular-devkit/schematics": "8.3.19",
-    "@angular/animations": "8.2.8",
-    "@angular/common": "8.2.8",
-    "@angular/core": "8.2.8",
-    "@angular/forms": "8.2.8",
-    "@angular/http": "7.2.15",
-    "@angular/platform-browser": "8.2.8",
-    "@angular/platform-browser-dynamic": "8.2.8",
-    "@angular/router": "8.2.8",
-    "@clr/angular": "2.3.8",
-    "@clr/icons": "2.3.8",
-    "@clr/ui": "2.3.8",
-    "@ngrx/core": "1.2.0",
-    "@ngrx/effects": "6.0.1",
-    "@ngrx/store": "6.0.1",
-    "@vcd/bindings": "9.1.1",
-    "@vcd/sdk": "0.11.0",
-    "@webcomponents/custom-elements": "1.2.1",
-    "core-js": "2.5.1",
-    "es6-shim": "0.35.3",
-    "mutationobserver-shim": "0.3.2",
-    "reflect-metadata": "0.1.10",
-    "reselect": "3.0.0",
-    "rxjs": "6.5.3",
-    "rxjs-compat": "6.5.3",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.10.2"
-  },
-  "devDependencies": {
-    "@types/jasmine": "2.5.47",
-    "@types/node": "14.0.1",
-    "angular2-template-loader": "0.6.2",
-    "autoprefixer": "9.3.1",
-    "awesome-typescript-loader": "5.2.1",
-    "copy-webpack-plugin": "5.0.3",
-    "css-loader": "1.0.0",
-    "cssnano": "4.1.10",
-    "exports-loader": "0.7.0",
-    "fast-xml-parser": "3.16.0",
-    "file-loader": "2.0.0",
-    "fs-extra": "9.0.0",
-    "happypack": "5.0.0",
-    "node-sass": "4.14.1",
-    "postcss": "7.0.5",
-    "postcss-loader": "3.0.0",
-    "postcss-url": "8.0.0",
-    "raw-loader": "0.5.1",
-    "rimraf": "2.6.1",
-    "sass-loader": "7.1.0",
-    "tslint": "4.5.1",
-    "typescript": "3.9.2",
-    "webpack": "4.22.0",
-    "webpack-cli": "3.1.2",
-    "webpack-sources": "1.4.3",
-    "zip-webpack-plugin": "3.0.0"
-  }
+	"name": "${projectHeading}",
+	"version": "1.0.0",
+	"description": "",
+	"scripts": {
+		"clean": "rimraf target",
+		"build": "ng build",
+		"prebuild": "node scripts/build-process.ts prebuild",
+		"postbuild": "node scripts/build-process.ts postbuild"
+	},
+	"license": "VMware Confidential",
+	"dependencies": {
+		"@angular/animations": "15.2.0",
+		"@angular/common": "15.2.0",
+		"@angular/compiler": "15.2.0",
+		"@angular/core": "15.2.0",
+		"@angular/forms": "15.2.0",
+		"@angular/platform-browser": "15.2.0",
+		"@angular/platform-browser-dynamic": "15.2.0",
+		"@angular/router": "15.2.0",
+		"@cds/core": "6.3.1",
+		"@clr/angular": "15.0.3",
+		"@clr/ui": "15.0.3",
+		"@vcd/bindings": "9.1.1",
+		"@vcd/i18n": "12.0.0",
+		"@vcd/plugin-builders": "15.0.1",
+		"@vcd/sdk": "15.0.2",
+		"rxjs": "7.8.0",
+		"tslib": "2.3.0",
+		"zone.js": "0.12.0"
+	},
+	"devDependencies": {
+		"@angular/cli": "15.2.3",
+    	"fast-xml-parser": "4.3.2",
+		"typescript": "4.9.4"
+	}
 }

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/scripts/build-process.ts

@@ -0,0 +1,30 @@
+const fs = require("fs");
+const { XMLParser } = require("fast-xml-parser");
+
+const manifestFile = "src/public/manifest.json";
+const cycle = process.argv[2];
+if (cycle === "prebuild") {
+	fs.copyFileSync(manifestFile, `${manifestFile}.temp`);
+	const parser = new XMLParser();
+	const pomJson = parser.parse(fs.readFileSync("pom.xml").toString().replace(/\r|\n/g, ""));
+
+	let manifestContent = fs.readFileSync(manifestFile).toString();
+	manifestContent = manifestContent.replace("VERSION_PLACEHOLDER", pomJson.project.version);
+	manifestContent = manifestContent.replace(
+		"NAME_PLACEHOLDER",
+		`${pomJson.project.groupId}.${pomJson.project.artifactId}`
+	);
+	manifestContent = manifestContent.replace(
+		"URN_PLACEHOLDER",
+		`${pomJson.project.groupId}.${pomJson.project.artifactId}`.replace(/\./g, ":")
+	);
+
+	fs.writeFileSync(manifestFile, manifestContent);
+} else if (cycle === "postbuild") {
+	fs.copyFileSync(`${manifestFile}.temp`, manifestFile);
+	fs.rmSync(`${manifestFile}.temp`, {
+		force: true
+	});
+} else {
+	console.log("Unknown argument");
+}

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/src/main/__projectName__.main.ts

@@ -0,0 +1 @@
+export * from 'src/main/${projectName}.module';

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/src/main/__projectName__.module.ts

@@ -1,17 +1,21 @@
 import { CommonModule } from "@angular/common";
 import { Inject, NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
-import { HttpModule } from "@angular/http";
 import { FormsModule } from "@angular/forms";
 import { HttpClientModule } from "@angular/common/http";
-import { ClarityModule } from "clarity-angular";
 import { Store } from "@ngrx/store";
-import { EXTENSION_ROUTE, ExtensionNavRegistration } from "@vcd/sdk/common";
-import { VcdApiClient, VcdSdkModule } from "@vcd/sdk";
-import { PluginModule } from "@vcd/sdk/core";
-import { TranslateService } from "@vcd/sdk/i18n";
+import { 
+    EXTENSION_ASSET_URL,
+    VcdApiClient,
+    VcdSdkModule,
+    EXTENSION_ROUTE,
+    ExtensionNavRegistration,
+    PluginModule
+} from "@vcd/sdk";
+import { ClarityModule } from "@clr/angular";
 import { ${projectHeading}Component } from "./${projectName}.component";
 import { SampleService } from "./services/sample.service";
+import { I18nModule, TranslationService } from "@vcd/i18n";
 
 const ROUTES: Routes = [
     {
@@ -24,7 +28,8 @@ const ROUTES: Routes = [
     imports: [
         ClarityModule,
         CommonModule,
-        HttpModule,
+        I18nModule.forChild(EXTENSION_ASSET_URL, true),
+        VcdSdkModule.forRoot(),
         FormsModule,
         HttpClientModule,
         VcdSdkModule,
@@ -41,8 +46,12 @@ const ROUTES: Routes = [
     ],
 })
 export class ${projectHeading}Module extends PluginModule {
-    constructor(appStore: Store<any>, @Inject(EXTENSION_ROUTE) extensionRoute: string, translate: TranslateService) {
-        super(appStore, translate);
+    constructor(
+        appStore: Store<any>,
+        @Inject(EXTENSION_ROUTE) extensionRoute: string,
+        translationService: TranslationService
+    ) {
+        super(appStore);
 
         let registrations: ExtensionNavRegistration[] = [
             {
@@ -51,7 +60,7 @@ export class ${projectHeading}Module extends PluginModule {
                 descriptionCode: "${projectName}.nav.description"
             }
         ];
-
+        translationService.registerTranslations();
         registrations.forEach(registration => this.registerExtension(registration));
     }
 }

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/src/main/services/sample.service.ts

@@ -1,6 +1,5 @@
 import { Injectable, Inject } from "@angular/core";
-import { VcdApiClient } from "@vcd/sdk";
-import { SESSION_ORGANIZATION } from "@vcd/sdk/common";
+import { VcdApiClient, SESSION_ORGANIZATION } from "@vcd/sdk";
 import { SampleMember } from "../model/sample-member";
 
 @Injectable()

maven/archetypes/vcd-ng/src/main/resources/archetype-resources/src/public/manifest.json

@@ -1,6 +1,6 @@
 {
-    "urn": "vmware:vcloud:${projectName}",
-    "name": "${groupId}.${artifactId}",
+    "urn": "URN_PLACEHOLDER",
+    "name": "NAME_PLACEHOLDER",
     "containerVersion": "10.0.0",
     "version": "VERSION_PLACEHOLDER",
     "scope": ["tenant","service-provider"],