feat: migration to angular[4194]

hashgraph · Nov 27, 2024 · c754792 · c754792
1 parent 5aaea29
commit c754792
Show file tree

Hide file tree

Showing 18 changed files with 60 additions and 72 deletions.
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -8,15 +8,13 @@
         "guardian": {
             "architect": {
                 "build": {
-                    "builder": "@angular-devkit/build-angular:browser",
+                    "builder": "@angular-devkit/build-angular:application",
                     "configurations": {
                         "development": {
-                            "buildOptimizer": false,
-                            "extractLicenses": false,
+                          "extractLicenses": false,
                             "namedChunks": true,
                             "optimization": false,
-                            "sourceMap": true,
-                            "vendorChunk": true
+                            "sourceMap": true
                         },
                         "production": {
                             "budgets": [
@@ -99,9 +97,12 @@
                         ],
                         "index": "src/index.html",
                         "inlineStyleLanguage": "scss",
-                        "main": "src/main.ts",
-                        "outputPath": "dist/guardian",
-                        "polyfills": "src/polyfills.ts",
+                        "outputPath": {
+                          "base": "dist/guardian"
+                        },
+                        "polyfills": [
+                          "src/polyfills.ts"
+                        ],
                         "scripts": [
                             "./node_modules/leader-line/leader-line.min.js"
                         ],
@@ -112,7 +113,8 @@
                           "./node_modules/primeicons/primeicons.css",
                           "src/styles.scss"
                         ],
-                        "tsConfig": "tsconfig.app.json"
+                        "tsConfig": "tsconfig.app.json",
+                        "browser": "src/main.ts"
                     }
                 },
                 "extract-i18n": {

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,24 +1,24 @@
 {
   "author": "Envision Blockchain Solutions <[email protected]>",
   "dependencies": {
-    "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/google-maps": "^17.3.10",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/router": "^17.3.12",
+    "@angular/animations": "^18.2.12",
+    "@angular/cdk": "^18.2.14",
+    "@angular/common": "^18.2.12",
+    "@angular/compiler": "^18.2.12",
+    "@angular/core": "^18.2.12",
+    "@angular/forms": "^18.2.12",
+    "@angular/google-maps": "^18.2.14",
+    "@angular/platform-browser": "^18.2.12",
+    "@angular/platform-browser-dynamic": "^18.2.12",
+    "@angular/router": "^18.2.12",
     "@ctrl/ngx-codemirror": "^5.1.1",
     "@enonic/global-polyfill": "^1.0.0",
     "@formulajs/formulajs": "^4.4.6",
     "@guardian/interfaces": "file:../interfaces",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
-    "angular-svg-icon": "^16.1.0",
-    "angularx-qrcode": "^17.0.1",
+    "angular-svg-icon": "^18.0.2",
+    "angularx-qrcode": "^18.0.2",
     "codemirror": "^5.65.0",
     "cronstrue": "^2.4.0",
     "crypto-browserify": "^3.12.0",
@@ -29,10 +29,10 @@
     "moment": "^2.29.2",
     "moment-timezone": "^0.5.43",
     "ngx-colors": "3.1.4",
-    "ngx-drag-drop": "^17.0.0",
+    "ngx-drag-drop": "^18.0.2",
     "ngx-file-drop": "^16.0.0",
-    "ngx-mask": "^17.1.8",
-    "ngx-toastr": "^17.0.2",
+    "ngx-mask": "^18.0.4",
+    "ngx-toastr": "^18.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.12",
     "process": "^0.11.10",
@@ -42,9 +42,9 @@
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.11",
-    "@angular/cli": "^17.3.11",
-    "@angular/compiler-cli": "^17.3.12",
+    "@angular-devkit/build-angular": "^18.2.12",
+    "@angular/cli": "^18.2.12",
+    "@angular/compiler-cli": "^18.2.12",
     "@types/file-saver": "^2.0.5",
     "@types/jasmine": "~3.6.0",
     "@types/js-yaml": "^4.0.5",

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HTTP_INTERCEPTORS, HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, withJsonpSupport } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
 import { ToastrModule } from 'ngx-toastr';
 import { AppRoutingModule, PermissionsGuard } from './app-routing.module';
@@ -130,8 +130,7 @@ import { OnlyForDemoDirective } from './directives/onlyfordemo.directive';
 import { UseWithServiceDirective } from './directives/use-with-service.directive';
 import { WorkerTasksComponent } from './views/worker-tasks/worker-tasks.component';
 
-@NgModule({
-    declarations: [
+@NgModule({ declarations: [
         AppComponent,
         UserProfileComponent,
         LoginComponent,
@@ -177,14 +176,13 @@ import { WorkerTasksComponent } from './views/worker-tasks/worker-tasks.componen
         UsersManagementDetailComponent,
         WorkerTasksComponent
     ],
-    imports: [
-        BrowserModule,
+    exports: [],
+    bootstrap: [AppComponent], imports: [BrowserModule,
         CommonModule,
         CommonComponentsModule,
         MaterialModule,
         AppRoutingModule,
         BrowserAnimationsModule,
-        HttpClientModule,
         FormsModule,
         SchemaEngineModule,
         PolicyEngineModule,
@@ -193,7 +191,6 @@ import { WorkerTasksComponent } from './views/worker-tasks/worker-tasks.componen
         TagEngineModule,
         CompareModule,
         ToastrModule.forRoot(),
-        HttpClientJsonpModule,
         QRCodeModule,
         ButtonModule,
         InputTextModule,
@@ -219,10 +216,7 @@ import { WorkerTasksComponent } from './views/worker-tasks/worker-tasks.componen
         ProjectComparisonModule,
         DndModule,
         CheckboxModule,
-        AngularSvgIconModule.forRoot()
-    ],
-    exports: [],
-    providers: [
+        AngularSvgIconModule.forRoot()], providers: [
         WebSocketService,
         AuthService,
         ProfileService,
@@ -274,8 +268,7 @@ import { WorkerTasksComponent } from './views/worker-tasks/worker-tasks.componen
             provide: HTTP_INTERCEPTORS,
             useClass: AuthInterceptor,
             multi: true,
-        }
-    ],
-    bootstrap: [AppComponent],
-})
+        },
+        provideHttpClient(withInterceptorsFromDi(), withJsonpSupport())
+    ] })
 export class AppModule { }
diff --git a/frontend/src/app/modules/common/datetime-picker/datetime-picker.component.ts b/frontend/src/app/modules/common/datetime-picker/datetime-picker.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import * as moment from 'moment';
+import moment from 'moment';
 // import { NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';
 // import { NgxMatMomentAdapter } from '@angular-material-components/moment-adapter';
 // import { GUARDIAN_DATETIME_FORMAT } from '../../../utils/datetime-format';

diff --git a/.../src/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.ts b/.../src/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.ts
@@ -1,7 +1,7 @@
 import {Component, Inject} from '@angular/core';
 // import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import {UntypedFormBuilder, Validators} from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import cronstrue from 'cronstrue';
 import {DynamicDialogConfig, DynamicDialogRef} from 'primeng/dynamicdialog';
 

diff --git a/...les/policy-engine/policy-configuration/policy-properties/policy-properties.component.html b/...les/policy-engine/policy-configuration/policy-properties/policy-properties.component.html
@@ -412,7 +412,7 @@
 
                                 <p-dropdown
                                     [(ngModel)]="item.creator"
-                                    [options]="policy?.policyRoles"
+                                    [options]="policy && policy.policyRoles"
                                     optionLabel="name"
                                     optionValue="name"
                                     [disabled]="readonly"
@@ -433,7 +433,7 @@
 
                                 <p-multiSelect
                                     [(ngModel)]="item.members"
-                                    [options]="policy?.policyRoles"
+                                    [options]="policy && policy.policyRoles"
                                     optionLabel="name"
                                     optionValue="name"
                                     [disabled]="readonly"

diff --git a/...policy-engine/policy-viewer/blocks/external-topic-block/external-topic-block.component.ts b/...policy-engine/policy-viewer/blocks/external-topic-block/external-topic-block.component.ts
@@ -3,7 +3,7 @@ import {UntypedFormBuilder, Validators} from '@angular/forms';
 import {PolicyEngineService} from 'src/app/services/policy-engine.service';
 import {PolicyHelper} from 'src/app/services/policy-helper.service';
 import {WebSocketService} from 'src/app/services/web-socket.service';
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 
 /**
  * Component for display block of 'external-topic' type.

diff --git a/...licy-engine/policy-viewer/blocks/messages-report-block/messages-report-block.component.ts b/...licy-engine/policy-viewer/blocks/messages-report-block/messages-report-block.component.ts
@@ -3,7 +3,7 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
 // import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 // import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as moment from 'moment';
+import moment from 'moment';
 import { DialogService } from 'primeng/dynamicdialog';
 import { VCViewerDialog } from 'src/app/modules/schema-engine/vc-dialog/vc-dialog.component';
 import { PolicyEngineService } from 'src/app/services/policy-engine.service';

diff --git a/...src/app/modules/policy-engine/policy-viewer/blocks/report-block/report-block.component.ts b/...src/app/modules/policy-engine/policy-viewer/blocks/report-block/report-block.component.ts
@@ -19,7 +19,7 @@ import {PolicyEngineService} from 'src/app/services/policy-engine.service';
 import {WebSocketService} from 'src/app/services/web-socket.service';
 import {IconsArray} from './iconsArray';
 import {DialogService} from 'primeng/dynamicdialog';
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 
 interface IAdditionalDocument {
     vpDocument?: IVPReport | undefined;

diff --git a/...ngine/policy-viewer/blocks/token-confirmation-block/token-confirmation-block.component.ts b/...ngine/policy-viewer/blocks/token-confirmation-block/token-confirmation-block.component.ts
@@ -3,7 +3,7 @@ import {PolicyEngineService} from 'src/app/services/policy-engine.service';
 import {PolicyHelper} from 'src/app/services/policy-helper.service';
 import {WebSocketService} from 'src/app/services/web-socket.service';
 import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 
 /**
  * Component for display block of 'tokenConfirmationBlock' types.

diff --git a/frontend/src/app/modules/policy-engine/services/wizard.service.ts b/frontend/src/app/modules/policy-engine/services/wizard.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {API_BASE_URL} from '../../../services/api';
 import {IWizardConfig, Schema, Token} from '@guardian/interfaces';

diff --git a/frontend/src/app/modules/project-comparison/project-comparison.module.ts b/frontend/src/app/modules/project-comparison/project-comparison.module.ts
@@ -7,22 +7,24 @@ import { InputNumberModule } from 'primeng/inputnumber';
 import { ButtonModule } from 'primeng/button';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AnnotationBlockComponent } from './component/annotation-block/annotation-block.component';
 import { ProjectsOverviewComponent } from './component/projects-overview/projects-overview.component';
 import { ProjectsComparisonTableComponent } from './component/projects-comparison-table/projects-comparison-table.component';
 import { CommonModule } from '@angular/common';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { CompareModule } from '../analytics/analytics.module';
 
-@NgModule({
-    declarations: [
+@NgModule({ declarations: [
         AnnotationBlockComponent,
         ProjectsOverviewComponent,
         ProjectsComparisonTableComponent
     ],
-    imports: [
-        CommonModule,
+    exports: [
+        AnnotationBlockComponent,
+        ProjectsOverviewComponent,
+        ProjectsComparisonTableComponent
+    ], imports: [CommonModule,
         FormsModule,
         BrowserModule,
         InputTextModule,
@@ -32,15 +34,7 @@ import { CompareModule } from '../analytics/analytics.module';
         ButtonModule,
         MultiSelectModule,
         ReactiveFormsModule,
-        HttpClientModule,
         AngularSvgIconModule.forRoot(),
-        CompareModule
-    ],
-    exports: [
-        AnnotationBlockComponent,
-        ProjectsOverviewComponent,
-        ProjectsComparisonTableComponent
-    ]
-})
+        CompareModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class ProjectComparisonModule {
 }
diff --git a/...tend/src/app/modules/schema-engine/schema-configuration/schema-configuration.component.ts b/...tend/src/app/modules/schema-engine/schema-configuration/schema-configuration.component.ts
@@ -3,7 +3,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators, } from '@angular/forms';
 import { FieldTypesDictionary, Schema, SchemaCategory, SchemaCondition, SchemaEntity, SchemaField, UnitSystem, } from '@guardian/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ConditionControl } from '../condition-control';

diff --git a/frontend/src/app/modules/schema-engine/schema-form/schema-form.component.ts b/frontend/src/app/modules/schema-engine/schema-form/schema-form.component.ts
@@ -4,7 +4,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, Simp
 import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { GenerateUUIDv4, Schema, SchemaField, UnitSystem } from '@guardian/interfaces';
 import { fullFormats } from 'ajv-formats/dist/formats';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IPFSService } from 'src/app/services/ipfs.service';

diff --git a/frontend/src/app/modules/tag-engine/models/tags-history.ts b/frontend/src/app/modules/tag-engine/models/tags-history.ts
@@ -2,7 +2,7 @@ import { TagItem } from './tag-item';
 import { TagMapItem } from './tag-map-item';
 import { TagOperation } from './tag-operation';
 import { TagStatus } from './tag-status';
-import * as moment from 'moment';
+import moment from 'moment';
 
 export class TagsHistory {
     public readonly entity: string;

diff --git a/frontend/src/app/modules/tag-engine/tags-explorer-dialog/tags-explorer-dialog.component.ts b/frontend/src/app/modules/tag-engine/tags-explorer-dialog/tags-explorer-dialog.component.ts
@@ -4,7 +4,7 @@ import { TagsService } from 'src/app/services/tag.service';
 import { TagsHistory } from '../models/tags-history';
 import { TagMapItem } from '../models/tag-map-item';
 import { TagItem } from '../models/tag-item';
-import * as moment from 'moment';
+import moment from 'moment';
 import { VCViewerDialog } from '../../schema-engine/vc-dialog/vc-dialog.component';
 import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { UserPermissions } from '@guardian/interfaces';

diff --git a/frontend/src/app/views/admin/logs-view/logs-view.component.ts b/frontend/src/app/views/admin/logs-view/logs-view.component.ts
@@ -4,7 +4,7 @@ import { UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 // import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
 import { saveAs } from 'file-saver';
 import { ILog } from '@guardian/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { merge, of, Subscription } from 'rxjs';
 import { catchError, debounceTime, map, startWith, switchMap } from 'rxjs/operators';
 import { LoggerService } from 'src/app/services/logger.service';

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -6,14 +6,13 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "esModuleInterop": true,
     "strictPropertyInitialization": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",