docs(examples): upgrade Angular to v14

1. Upgraded Angular from v13 to v14 2. Also bumped up the Ionic Framework dependencies as needed because older versions that we were using were not compatible [1] with Angular v14 3. Also did some of the Cactus -> Cacti renaming in the front-end code namely the front-page of both the supply chain and the carbon accounting app examples. [1] https://stackoverflow.com/a/72508644 Verbatim copy of the above link's comment: ================================== The current version of Ionic v6.1.8 is not compatible with Angular 14. Apparently, it's been fixed in a dev release but it's not stable yet. Have a look here ionic-team/ionic-framework#25353 you can update @ionic/angular to version 6.1.9-dev.11654275237.1b595be3 and re-run npm install. Should work fine for now, if you wanna be on the edge. ================================== Fixes #2377 Signed-off-by: Peter Somogyvari <peter.somogyvari@accenture.com>
hyperledger · Jun 30, 2023 · fbb51cd · fbb51cd
1 parent 166ab4f
commit fbb51cd
Show file tree

Hide file tree

Showing 14 changed files with 1,744 additions and 2,611 deletions.
diff --git a/examples/cactus-example-carbon-accounting-frontend/angular.json b/examples/cactus-example-carbon-accounting-frontend/angular.json
@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "defaultProject": "app",
   "newProjectRoot": "projects",
   "projects": {
     "app": {
@@ -177,7 +176,9 @@
     }
   },
   "cli": {
-    "defaultCollection": "@ionic/angular-toolkit"
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ]
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

diff --git a/examples/cactus-example-carbon-accounting-frontend/package.json b/examples/cactus-example-carbon-accounting-frontend/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@hyperledger/cactus-example-carbon-accounting-frontend",
   "version": "2.0.0-alpha.1",
-  "description": "The frontend component of an example project demonstrating how Cactus can be used for cross-chain dapp development.",
+  "description": "The frontend component of an example project demonstrating how Cacti can be used for cross-chain dapp development.",
   "keywords": [
     "Hyperledger",
-    "Cactus",
+    "Cacti",
     "Blockchain Integration",
     "Distributed Ledger Technology"
   ],
@@ -18,9 +18,9 @@
   },
   "license": "Apache-2.0",
   "author": {
-    "name": "Hyperledger Cactus Contributors",
-    "email": "cactus@lists.hyperledger.org",
-    "url": "https://www.hyperledger.org/use/cactus"
+    "name": "Hyperledger Cacti Contributors",
+    "email": "cacti@lists.hyperledger.org",
+    "url": "https://www.hyperledger.org/use/cacti"
   },
   "contributors": [
     {
@@ -48,12 +48,12 @@
     "start": "ng serve"
   },
   "dependencies": {
-    "@angular/common": "13.3.2",
-    "@angular/core": "13.3.2",
-    "@angular/forms": "13.3.2",
-    "@angular/platform-browser": "13.3.2",
-    "@angular/platform-browser-dynamic": "13.3.2",
-    "@angular/router": "13.3.2",
+    "@angular/common": "14.3.0",
+    "@angular/core": "14.3.0",
+    "@angular/forms": "14.3.0",
+    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "14.3.0",
     "@hyperledger/cactus-api-client": "2.0.0-alpha.1",
     "@hyperledger/cactus-common": "2.0.0-alpha.1",
     "@hyperledger/cactus-core-api": "2.0.0-alpha.1",
@@ -64,19 +64,19 @@
     "@ionic-native/core": "5.36.0",
     "@ionic-native/splash-screen": "5.36.0",
     "@ionic-native/status-bar": "5.36.0",
-    "@ionic/angular": "6.0.15",
+    "@ionic/angular": "6.7.5",
     "rxjs": "7.8.1",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "13.1.0",
-    "@angular-devkit/build-angular": "13.3.2",
-    "@angular/cli": "13.3.2",
-    "@angular/compiler": "13.3.2",
-    "@angular/compiler-cli": "13.3.2",
-    "@angular/language-service": "13.3.2",
-    "@ionic/angular-toolkit": "4.0.0",
+    "@angular-builders/custom-webpack": "14.1.0",
+    "@angular-devkit/build-angular": "14.2.12",
+    "@angular/cli": "14.2.12",
+    "@angular/compiler": "14.3.0",
+    "@angular/compiler-cli": "14.3.0",
+    "@angular/language-service": "14.3.0",
+    "@ionic/angular-toolkit": "9.0.0",
     "@types/node": "16.4.13",
     "codelyzer": "6.0.2",
     "https-browserify": "1.0.0",
@@ -101,4 +101,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/examples/cactus-example-carbon-accounting-frontend/src/app/app.component.html b/examples/cactus-example-carbon-accounting-frontend/src/app/app.component.html
@@ -3,7 +3,7 @@
     <ion-menu contentId="main-content" type="overlay">
       <ion-content>
         <ion-list id="inbox-list">
-          <ion-list-header>Hyperledger Cactus</ion-list-header>
+          <ion-list-header>Hyperledger Cacti</ion-list-header>
           <ion-note>Example: Carbon Accounting App</ion-note>
 
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">

diff --git a/examples/cactus-example-carbon-accounting-frontend/src/index.html b/examples/cactus-example-carbon-accounting-frontend/src/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Hyperledger Cactus Example - Carbon Accounting App</title>
+  <title>Hyperledger Cacti Example - Carbon Accounting App</title>
 
   <base href="/" />
 

diff --git a/examples/cactus-example-carbon-accounting-frontend/tsconfig.json b/examples/cactus-example-carbon-accounting-frontend/tsconfig.json
@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ES2020",
     "lib": [
       "es2018",
       "dom"

diff --git a/examples/cactus-example-supply-chain-frontend/angular.json b/examples/cactus-example-supply-chain-frontend/angular.json
@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "defaultProject": "app",
   "newProjectRoot": "projects",
   "projects": {
     "app": {
@@ -177,7 +176,10 @@
     }
   },
   "cli": {
-    "defaultCollection": "@ionic/angular-toolkit"
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

diff --git a/examples/cactus-example-supply-chain-frontend/package.json b/examples/cactus-example-supply-chain-frontend/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@hyperledger/cactus-example-supply-chain-frontend",
   "version": "2.0.0-alpha.1",
-  "description": "The frontend component of an example project demonstrating how Cactus can be used for cross-chain dapp development.",
+  "description": "The frontend component of an example project demonstrating how Cacti can be used for cross-chain dapp development.",
   "keywords": [
     "Hyperledger",
-    "Cactus",
+    "Cacti",
     "Blockchain Integration",
     "Distributed Ledger Technology"
   ],
@@ -18,9 +18,9 @@
   },
   "license": "Apache-2.0",
   "author": {
-    "name": "Hyperledger Cactus Contributors",
-    "email": "cactus@lists.hyperledger.org",
-    "url": "https://www.hyperledger.org/use/cactus"
+    "name": "Hyperledger Cacti Contributors",
+    "email": "cacti@lists.hyperledger.org",
+    "url": "https://www.hyperledger.org/use/cacti"
   },
   "contributors": [
     {
@@ -48,12 +48,12 @@
     "start": "ng serve"
   },
   "dependencies": {
-    "@angular/common": "13.3.7",
-    "@angular/core": "13.3.7",
-    "@angular/forms": "13.3.7",
-    "@angular/platform-browser": "13.3.7",
-    "@angular/platform-browser-dynamic": "13.3.7",
-    "@angular/router": "13.3.7",
+    "@angular/common": "14.3.0",
+    "@angular/core": "14.3.0",
+    "@angular/forms": "14.3.0",
+    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "14.3.0",
     "@hyperledger/cactus-api-client": "2.0.0-alpha.1",
     "@hyperledger/cactus-common": "2.0.0-alpha.1",
     "@hyperledger/cactus-core-api": "2.0.0-alpha.1",
@@ -65,19 +65,19 @@
     "@ionic-native/core": "5.36.0",
     "@ionic-native/splash-screen": "5.36.0",
     "@ionic-native/status-bar": "5.36.0",
-    "@ionic/angular": "6.1.5",
+    "@ionic/angular": "6.7.5",
     "rxjs": "7.8.1",
     "tslib": "2.4.0",
     "zone.js": "0.11.5"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "13.1.0",
-    "@angular-devkit/build-angular": "14.0.0",
-    "@angular/cli": "13.3.5",
-    "@angular/compiler": "13.3.7",
-    "@angular/compiler-cli": "13.3.7",
-    "@angular/language-service": "13.3.7",
-    "@ionic/angular-toolkit": "6.1.0",
+    "@angular-builders/custom-webpack": "14.1.0",
+    "@angular-devkit/build-angular": "14.2.12",
+    "@angular/cli": "14.2.12",
+    "@angular/compiler": "14.3.0",
+    "@angular/compiler-cli": "14.3.0",
+    "@angular/language-service": "14.3.0",
+    "@ionic/angular-toolkit": "9.0.0",
     "@types/node": "17.0.32",
     "codelyzer": "6.0.2",
     "constants-browserify": "1.0.0",
@@ -100,4 +100,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/examples/cactus-example-supply-chain-frontend/src/app/app.component.html b/examples/cactus-example-supply-chain-frontend/src/app/app.component.html
@@ -3,7 +3,7 @@
     <ion-menu contentId="main-content" type="overlay">
       <ion-content>
         <ion-list id="inbox-list">
-          <ion-list-header>Hyperledger Cactus</ion-list-header>
+          <ion-list-header>Hyperledger Cacti</ion-list-header>
           <ion-note>Example: Supply Chain App</ion-note>
 
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">

diff --git a/...chain-frontend/src/app/bamboo-harvest/bamboo-harvest-detail/bamboo-harvest-detail.page.ts b/...chain-frontend/src/app/bamboo-harvest/bamboo-harvest-detail/bamboo-harvest-detail.page.ts
@@ -2,7 +2,11 @@ import { v4 as uuidv4 } from "uuid";
 import { RuntimeError } from "run-time-error";
 
 import { Component, Inject, Input, OnInit } from "@angular/core";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+} from "@angular/forms";
 import { ModalController } from "@ionic/angular";
 
 import { ApiClient } from "@hyperledger/cactus-api-client";
@@ -19,14 +23,14 @@ import { isBambooHarvest } from "../is-bamboo-harvest";
 })
 export class BambooHarvestDetailPage implements OnInit {
   private readonly log: Logger;
-  public form: FormGroup;
+  public form: UntypedFormGroup;
   @Input()
   public bambooHarvest: BambooHarvest;
 
   constructor(
     private readonly baseClient: ApiClient,
     public readonly modalController: ModalController,
-    public readonly formBuilder: FormBuilder,
+    public readonly formBuilder: UntypedFormBuilder,
     @Inject(QUORUM_DEMO_LEDGER_ID) private readonly quorumLedgerId: string,
   ) {
     this.log = LoggerProvider.getOrCreate({ label: "BambooHarvestDetailPage" });

diff --git a/...example-supply-chain-frontend/src/app/bookshelf/bookshelf-detail/bookshelf-detail.page.ts b/...example-supply-chain-frontend/src/app/bookshelf/bookshelf-detail/bookshelf-detail.page.ts
@@ -1,7 +1,11 @@
 import { v4 as uuidv4 } from "uuid";
 
 import { Component, Inject, Input, OnInit } from "@angular/core";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+} from "@angular/forms";
 import { ModalController } from "@ionic/angular";
 
 import { ApiClient } from "@hyperledger/cactus-api-client";
@@ -25,7 +29,7 @@ import { AuthConfig } from "../../common/auth-config";
 export class BookshelfDetailPage implements OnInit {
   private readonly log: Logger;
   private _supplyChainApi: SupplyChainApi | undefined;
-  public form: FormGroup;
+  public form: UntypedFormGroup;
   @Input()
   public bookshelf: Bookshelf;
   public bambooHarvests: BambooHarvest[];
@@ -35,7 +39,7 @@ export class BookshelfDetailPage implements OnInit {
     private readonly baseClient: ApiClient,
     @Inject(QUORUM_DEMO_LEDGER_ID) private readonly quorumLedgerId: string,
     public readonly modalController: ModalController,
-    public readonly formBuilder: FormBuilder,
+    public readonly formBuilder: UntypedFormBuilder,
   ) {
     this.log = LoggerProvider.getOrCreate({ label: "BookshelfDetailPage" });
   }

diff --git a/...us-example-supply-chain-frontend/src/app/shipment/shipment-detail/shipment-detail.page.ts b/...us-example-supply-chain-frontend/src/app/shipment/shipment-detail/shipment-detail.page.ts
@@ -1,7 +1,11 @@
 import { v4 as uuidv4 } from "uuid";
 
 import { Component, Inject, Input, OnInit } from "@angular/core";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+} from "@angular/forms";
 import { ModalController } from "@ionic/angular";
 
 import { ApiClient } from "@hyperledger/cactus-api-client";
@@ -25,7 +29,7 @@ import { AuthConfig } from "../../common/auth-config";
 export class ShipmentDetailPage implements OnInit {
   private readonly log: Logger;
   private _supplyChainApi: SupplyChainApi | undefined;
-  public form: FormGroup;
+  public form: UntypedFormGroup;
   @Input()
   public shipment: Shipment;
   public bookshelves: Bookshelf[];
@@ -35,7 +39,7 @@ export class ShipmentDetailPage implements OnInit {
     private readonly baseClient: ApiClient,
     @Inject(QUORUM_DEMO_LEDGER_ID) private readonly quorumLedgerId: string,
     public readonly modalController: ModalController,
-    public readonly formBuilder: FormBuilder,
+    public readonly formBuilder: UntypedFormBuilder,
   ) {
     this.log = LoggerProvider.getOrCreate({ label: "ShipmentDetailPage" });
   }

diff --git a/examples/cactus-example-supply-chain-frontend/src/index.html b/examples/cactus-example-supply-chain-frontend/src/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Hyperledger Cactus Example - Supply Chain App</title>
+  <title>Hyperledger Cacti Example - Supply Chain App</title>
 
   <base href="/" />
 

diff --git a/examples/cactus-example-supply-chain-frontend/tsconfig.json b/examples/cactus-example-supply-chain-frontend/tsconfig.json
@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "lib": [
       "es2018",
       "dom"