update to angular 12

2026-03-26 18:31:52 +00:00 · 2021-08-10 18:53:39 -06:00
parent 8bd6c6d6f4
commit b6aea884aa
19 changed files with 12735 additions and 10234 deletions
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -14,6 +14,7 @@
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
+            "allowedCommonJsDependencies": ["json-pointer"],
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
@@ -29,21 +30,16 @@
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "src/assets/icon",
-                "output": "./svg"
-              }
-            ],
-            "styles": [
-              {
-                "input": "src/theme/variables.scss"
-              },
-              {
-                "input": "src/global.scss"
              }
            ],
+            "styles": ["src/theme/variables.scss", "src/global.scss"],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true,
            "scripts": []
          },
          "configurations": {
@@ -96,13 +92,11 @@
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
          "options": {
-            "tsConfig": [
-              "tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
            ]
          }
        },
@@ -145,4 +139,4 @@
      "styleext": "scss"
    }
  }
-}
+}
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,49 +9,47 @@
    "start": "ng serve",
    "build": "ng build",
    "build-prod": "ng build --prod && tsc postprocess.ts && node postprocess.js && git log | head -n1 > www/git-hash.txt",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "lint": "ng lint"
  },
  "dependencies": {
-    "@angular/common": "^11.0.0",
-    "@angular/core": "^11.0.0",
-    "@angular/forms": "^11.0.0",
-    "@angular/platform-browser": "^11.0.0",
-    "@angular/platform-browser-dynamic": "^11.0.0",
-    "@angular/router": "^11.0.0",
-    "@ionic/angular": "^5.6.0",
-    "@ionic/storage": "^3.0.0",
-    "@ionic/storage-angular": "^3.0.0",
-    "@start9labs/emver": "^0.1.4",
-    "ajv": "^6.12.6",
-    "angularx-qrcode": "^11.0.0",
-    "compare-versions": "^3.5.0",
-    "core-js": "^3.4.0",
-    "handlebars": "^4.7.6",
-    "json-pointer": "^0.6.1",
-    "jsonpointerx": "^1.0.30",
-    "marked": "^2.0.0",
+    "@angular/common": "12.2.0",
+    "@angular/core": "12.2.0",
+    "@angular/forms": "12.2.0",
+    "@angular/platform-browser": "12.2.0",
+    "@angular/platform-browser-dynamic": "12.2.0",
+    "@angular/router": "12.2.0",
+    "@ionic/angular": "5.6.13",
+    "@ionic/storage-angular": "3.0.6",
+    "@start9labs/emver": "0.1.4",
+    "ajv": "6.12.6",
+    "compare-versions": "3.6.0",
+    "core-js": "3.16.1",
+    "json-pointer": "0.6.1",
+    "jsonpointerx": "1.1.3",
+    "marked": "2.1.3",
+    "mustache": "^4.2.0",
+    "ng-qrcode": "^5.0.0",
    "patch-db-client": "file: ../../../../patch-db/client",
-    "rxjs": "^6.6.0",
-    "uuid": "^8.3.0",
-    "zone.js": "^0.11.2"
+    "rxjs": "6.6.7",
+    "uuid": "8.3.2",
+    "zone.js": "0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.0",
-    "@angular/cli": "^11.0.0",
-    "@angular/compiler": "^11.0.0",
-    "@angular/compiler-cli": "^11.0.0",
-    "@angular/language-service": "^11.0.0",
-    "@ionic/angular-toolkit": "^3.0.0",
-    "@ionic/lab": "^3.2.9",
-    "@types/json-pointer": "^1.0.30",
-    "@types/marked": "^2.0.0",
-    "@types/node": "^15.0.0",
-    "@types/uuid": "^8.0.0",
-    "node-html-parser": "^3.2.0",
-    "ts-node": "^9.1.0",
-    "tslint": "^6.1.0",
-    "typescript": "4.1.5"
+    "@angular-devkit/build-angular": "12.2.0",
+    "@angular/cli": "12.2.0",
+    "@angular/compiler": "12.2.0",
+    "@angular/compiler-cli": "12.2.0",
+    "@angular/language-service": "12.2.0",
+    "@ionic/angular-toolkit": "4.0.0",
+    "@types/json-pointer": "1.0.31",
+    "@types/marked": "2.0.4",
+    "@types/mustache": "^4.1.2",
+    "@types/node": "16.4.13",
+    "@types/uuid": "8.3.1",
+    "node-html-parser": "4.1.3",
+    "raw-loader": "^4.0.2",
+    "ts-node": "10.2.0",
+    "tslint": "6.1.3",
+    "typescript": "4.3.5"
  }
 }
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -48,7 +48,7 @@
  </ion-split-pane>
  <section id="preload" style="display: none;">
    <!-- 3rd party components -->
-    <qrcode qrdata="hello"></qrcode>
+    <qr-code value="hello"></qr-code>

    <img src="assets/img/success-bulb.png"/>
    <img src="assets/img/danger-bulb.png"/>
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { Storage } from '@ionic/storage'
+import { Storage } from '@ionic/storage-angular'
 import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/embassy/embassy-api.service'
 import { Router, RoutesRecognized } from '@angular/router'
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -12,7 +12,7 @@ import { ApiServiceFactory, MarketplaceApiServiceFactory } from './services/api/
 import { PatchDbServiceFactory } from './services/patch-db/patch-db.factory'
 import { HttpService } from './services/http.service'
 import { ConfigService } from './services/config.service'
-import { QRCodeModule } from 'angularx-qrcode'
+import { QrCodeModule } from 'ng-qrcode'
 import { OSWelcomePageModule } from './modals/os-welcome/os-welcome.module'
 import { MarkdownPageModule } from './modals/markdown/markdown.module'
 import { PatchDbService } from './services/patch-db/patch-db.service'
@@ -35,7 +35,7 @@ import { FormBuilder } from '@angular/forms'
      name: '_embassystorage',
      driverOrder: [Drivers.LocalStorage, Drivers.IndexedDB],
    }),
-    QRCodeModule,
+    QrCodeModule,
    OSWelcomePageModule,
    MarkdownPageModule,
    SharingModule,
--- a/ui/src/app/components/form-object/form-label.component.html
+++ b/ui/src/app/components/form-object/form-label.component.html
@@ -4,6 +4,6 @@
 <ion-text color="success" *ngIf="data.isNew">&nbsp;(New)</ion-text>
 <ion-text color="warning" *ngIf="data.isEdited">&nbsp;(Edited)</ion-text>

-<span *ngIf="(['string', 'number'] | includes : data.spec.type) && !data.spec.nullable">&nbsp;*</span>
+<span *ngIf="(['string', 'number'] | includes : data.spec.type) && !$any(data.spec).nullable">&nbsp;*</span>

 <span *ngIf="data.spec.type === 'list' && Range.from(data.spec.range).min">&nbsp;*</span>
--- a/ui/src/app/components/form-object/form-object.component.ts
+++ b/ui/src/app/components/form-object/form-object.component.ts
@@ -5,7 +5,7 @@ import { ConfigSpec, ListValueSpecOf, ValueSpec, ValueSpecList, ValueSpecListOf,
 import { FormService } from 'src/app/services/form.service'
 import { Range } from 'src/app/pkg-config/config-utilities'
 import { EnumListPage } from 'src/app/modals/enum-list/enum-list.page'
-import * as handlebars from 'handlebars'
+const Mustache = require('mustache')
 import { pauseFor } from 'src/app/util/misc.util'

@Component({
@@ -54,7 +54,7 @@ export class FormObjectComponent {
          this.objectListInfo[key][index] = {
            expanded: false,
            height: '0px',
-            displayAs: displayAs ? handlebars.compile(displayAs)(obj) : '',
+            displayAs: displayAs ? (Mustache as any).render(displayAs, obj) : '',
          }
        })
      }
@@ -93,7 +93,7 @@ export class FormObjectComponent {
      this.objectListInfo[key].push({
        height: '0px',
        expanded: true,
-        displayAs: displayAs ? handlebars.compile(displayAs)(newItem.value) : '',
+        displayAs: displayAs ? Mustache.render(displayAs, newItem.value) : '',
      })

      pauseFor(200).then(() => {
--- a/ui/src/app/components/qr/qr.component.html
+++ b/ui/src/app/components/qr/qr.component.html
@@ -1 +1 @@
-<qrcode [qrdata]="text" [width]="width" errorCorrectionLevel="L"></qrcode>
+<qr-code [value]="text"></qr-code>
--- a/ui/src/app/components/qr/qr.component.module.ts
+++ b/ui/src/app/components/qr/qr.component.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { QRComponent } from './qr.component'
 import { IonicModule } from '@ionic/angular'
-import { QRCodeModule } from 'angularx-qrcode'
+import { QrCodeModule } from 'ng-qrcode'

@NgModule({
  declarations: [
@@ -11,7 +11,7 @@ import { QRCodeModule } from 'angularx-qrcode'
  imports: [
    CommonModule,
    IonicModule,
-    QRCodeModule,
+    QrCodeModule,
  ],
  exports: [QRComponent],
 })
--- a/ui/src/app/components/qr/qr.component.ts
+++ b/ui/src/app/components/qr/qr.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core'
-import { isPlatform } from '@ionic/angular'

@Component({
  selector: 'qr',
@@ -8,9 +7,4 @@ import { isPlatform } from '@ionic/angular'
 })
 export class QRComponent {
  @Input() text: string
-  width: number
-
-  ngOnInit () {
-    this.width = isPlatform('ios') || isPlatform('android') ? 320 : 420
-  }
 }
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
@@ -18,7 +18,7 @@ interface LocalInterface {
 export class AppInterfacesPage {
  @ViewChild(IonContent) content: IonContent
  ui: LocalInterface | null
-  other: LocalInterface[]
+  other: LocalInterface[] = []

  constructor (
    private readonly route: ActivatedRoute,
--- a/ui/src/app/pages/login/login.module.ts
+++ b/ui/src/app/pages/login/login.module.ts
@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms'
 import { IonicModule } from '@ionic/angular'
 import { LoginPage } from './login.page'
 import { SharingModule } from 'src/app/modules/sharing.module'
+// import { MarketplaceLibModule } from 'marketplace-lib'

 const routes: Routes = [
  {
@@ -20,6 +21,7 @@ const routes: Routes = [
    IonicModule,
    RouterModule.forChild(routes),
    SharingModule,
+    // MarketplaceLibModule,
  ],
  declarations: [LoginPage],
 })
--- a/ui/src/app/pages/login/login.page.html
+++ b/ui/src/app/pages/login/login.page.html
@@ -1,4 +1,5 @@
 <ion-content>
+  <!-- <start9-marketplace-lib></start9-marketplace-lib> -->
  <ion-grid style="height: 100%; max-width: 540px;">
    <ion-row class="ion-align-items-center" style="height: 100%;">
      <ion-col class="ion-text-center">
--- a/ui/src/app/services/api/embassy/embassy-mock-api.service.ts
+++ b/ui/src/app/services/api/embassy/embassy-mock-api.service.ts
@@ -7,7 +7,7 @@ import { RR, WithRevision } from '../api.types'
 import { parsePropertiesPermissive } from 'src/app/util/properties.util'
 import { Mock } from '../api.fixures'
 import { HttpService } from '../../http.service'
-import markdown from 'raw-loader!src/assets/markdown/md-sample.md'
+import markdown from '!!raw-loader!src/assets/markdown/md-sample.md'
 import { ConfigService } from '../../config.service'

@Injectable()
--- a/ui/src/app/services/auth.service.ts
+++ b/ui/src/app/services/auth.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { distinctUntilChanged } from 'rxjs/operators'
 import { ApiService } from './api/embassy/embassy-api.service'
-import { Storage } from '@ionic/storage'
+import { Storage } from '@ionic/storage-angular'
 import { getPlatforms, isPlatform } from '@ionic/angular'

 export enum AuthState {
--- a/ui/src/app/services/emver.service.ts
+++ b/ui/src/app/services/emver.service.ts
@@ -12,7 +12,10 @@ export class Emver {
  }

  compare (lhs: string, rhs: string): number {
-    return this.e.compare(lhs, rhs)
+    console.log('EMVER', this.e)
+    const compare = this.e.compare(lhs, rhs)
+    console.log('COMPARE', compare)
+    return compare
  }

  satisfies (version: string, range: string): boolean {
--- a/ui/src/app/services/patch-db/local-storage-bootstrap.ts
+++ b/ui/src/app/services/patch-db/local-storage-bootstrap.ts
@@ -1,7 +1,7 @@
 import { Bootstrapper, DBCache } from 'patch-db-client'
 import { DataModel } from './data-model'
 import { Injectable } from '@angular/core'
-import { Storage } from '@ionic/storage'
+import { Storage } from '@ionic/storage-angular'

@Injectable({
  providedIn: 'root',
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -5,7 +5,8 @@
    "outDir": "./out-tsc/app",
    "sourceMap": true,
    "declaration": false,
-    "module": "esnext",
+    "downlevelIteration": true,
+    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
@@ -26,7 +27,10 @@
    ]
  },
  "angularCompilerOptions": {
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
  },
  "files": [
    "src/main.ts",