update to angular 12

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": [
+            "lintFilePatterns": [
-              "tsconfig.json"
+              "src/**/*.ts",
-            ],
+              "src/**/*.html"
-            "exclude": [
-              "**/node_modules/**"
             ]
           }
         },

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"
-    "lint": "ng lint",
-    "e2e": "ng e2e"
   },
   "dependencies": {
-    "@angular/common": "^11.0.0",
+    "@angular/common": "12.2.0",
-    "@angular/core": "^11.0.0",
+    "@angular/core": "12.2.0",
-    "@angular/forms": "^11.0.0",
+    "@angular/forms": "12.2.0",
-    "@angular/platform-browser": "^11.0.0",
+    "@angular/platform-browser": "12.2.0",
-    "@angular/platform-browser-dynamic": "^11.0.0",
+    "@angular/platform-browser-dynamic": "12.2.0",
-    "@angular/router": "^11.0.0",
+    "@angular/router": "12.2.0",
-    "@ionic/angular": "^5.6.0",
+    "@ionic/angular": "5.6.13",
-    "@ionic/storage": "^3.0.0",
+    "@ionic/storage-angular": "3.0.6",
-    "@ionic/storage-angular": "^3.0.0",
+    "@start9labs/emver": "0.1.4",
-    "@start9labs/emver": "^0.1.4",
+    "ajv": "6.12.6",
-    "ajv": "^6.12.6",
+    "compare-versions": "3.6.0",
-    "angularx-qrcode": "^11.0.0",
+    "core-js": "3.16.1",
-    "compare-versions": "^3.5.0",
+    "json-pointer": "0.6.1",
-    "core-js": "^3.4.0",
+    "jsonpointerx": "1.1.3",
-    "handlebars": "^4.7.6",
+    "marked": "2.1.3",
-    "json-pointer": "^0.6.1",
+    "mustache": "^4.2.0",
-    "jsonpointerx": "^1.0.30",
+    "ng-qrcode": "^5.0.0",
-    "marked": "^2.0.0",
     "patch-db-client": "file: ../../../../patch-db/client",
-    "rxjs": "^6.6.0",
+    "rxjs": "6.6.7",
-    "uuid": "^8.3.0",
+    "uuid": "8.3.2",
-    "zone.js": "^0.11.2"
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.0",
+    "@angular-devkit/build-angular": "12.2.0",
-    "@angular/cli": "^11.0.0",
+    "@angular/cli": "12.2.0",
-    "@angular/compiler": "^11.0.0",
+    "@angular/compiler": "12.2.0",
-    "@angular/compiler-cli": "^11.0.0",
+    "@angular/compiler-cli": "12.2.0",
-    "@angular/language-service": "^11.0.0",
+    "@angular/language-service": "12.2.0",
-    "@ionic/angular-toolkit": "^3.0.0",
+    "@ionic/angular-toolkit": "4.0.0",
-    "@ionic/lab": "^3.2.9",
+    "@types/json-pointer": "1.0.31",
-    "@types/json-pointer": "^1.0.30",
+    "@types/marked": "2.0.4",
-    "@types/marked": "^2.0.0",
+    "@types/mustache": "^4.1.2",
-    "@types/node": "^15.0.0",
+    "@types/node": "16.4.13",
-    "@types/uuid": "^8.0.0",
+    "@types/uuid": "8.3.1",
-    "node-html-parser": "^3.2.0",
+    "node-html-parser": "4.1.3",
-    "ts-node": "^9.1.0",
+    "raw-loader": "^4.0.2",
-    "tslint": "^6.1.0",
+    "ts-node": "10.2.0",
-    "typescript": "4.1.5"
+    "tslint": "6.1.3",
+    "typescript": "4.3.5"
   }
 }

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"/>

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'

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,

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>

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(() => {

ui/src/app/components/qr/qr.component.html

@@ -1 +1 @@
-<qrcode [qrdata]="text" [width]="width" errorCorrectionLevel="L"></qrcode>
+<qr-code [value]="text"></qr-code>

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],
 })

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
-  }
 }

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,

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],
 })

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">

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()

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 {

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 {

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',

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",