Upgrade to Ionic 5 and Angular 9 Ivy

angular.json

@@ -68,6 +68,10 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
               ]
             },

package.json

@@ -13,36 +13,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~8.1.2",
+    "@angular/common": "~10.1.5",
-    "@angular/core": "~8.1.2",
+    "@angular/core": "~10.1.5",
-    "@angular/forms": "~8.1.2",
+    "@angular/forms": "~10.1.5",
-    "@angular/platform-browser": "~8.1.2",
+    "@angular/platform-browser": "~10.1.5",
-    "@angular/platform-browser-dynamic": "~8.1.2",
+    "@angular/platform-browser-dynamic": "~10.1.5",
-    "@angular/router": "~8.1.2",
+    "@angular/router": "~10.1.5",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
-    "@ionic/angular": "^4.7.1",
+    "@ionic/angular": "^5.3.5",
     "ag-grid-angular": "^22.1.1",
     "ag-grid-community": "^22.1.1",
     "angular-tree-component": "^8.5.2",
     "core-js": "^2.5.4",
     "moment": "^2.24.0",
     "ngx-monaco-editor": "^8.1.1",
-    "rxjs": "~6.5.1",
+    "rxjs": "~6.6.3",
     "tslib": "^1.9.0",
     "uuid": "^3.4.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/architect": "~0.801.2",
-    "@angular-devkit/build-angular": "~0.801.2",
+    "@angular-devkit/build-angular": "~0.1001.6",
-    "@angular-devkit/core": "~8.1.2",
+    "@angular-devkit/core": "~10.1.6",
-    "@angular-devkit/schematics": "~8.1.2",
+    "@angular-devkit/schematics": "^10.1.6",
-    "@angular/cli": "~8.1.2",
+    "@angular/cli": "^10.1.6",
-    "@angular/compiler": "~8.1.2",
+    "@angular/compiler": "~10.1.5",
-    "@angular/compiler-cli": "~8.1.2",
+    "@angular/compiler-cli": "~10.1.5",
-    "@angular/language-service": "~8.1.2",
+    "@angular/language-service": "~10.1.5",
     "@ionic/angular-toolkit": "^2.1.1",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
@@ -58,7 +58,7 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
+    "typescript": "~4.0.3"
   },
   "description": "An Ionic project"
 }

src/app/app.component.html

@@ -1,12 +1,13 @@
 <ion-app class="dark">
-  <ion-split-pane when="sm">
+  <ion-split-pane contentId="main-content">
-    <ion-menu class="sidebar">
+    <ion-menu class="sidebar" contentId="main-content" content="content" type="push" side="start">
       <ion-header>
         <ion-toolbar color="primary">
-          <ion-title>Noded</ion-title>
+          <ion-title>Noded
+            <ion-menu-toggle menu="first" autoHide="false"></ion-menu-toggle>
+          </ion-title>
         </ion-toolbar>
       </ion-header>
-
       <ion-content>
         <ion-list>
           <ion-list-header>
@@ -34,18 +35,13 @@
       </ion-content>
       <ion-footer>
         <ion-searchbar placeholder="Filter pages..." (ionChange)="onFilterChange($event)"></ion-searchbar>
-        <ion-item button slot="end" lines="full" (click)="showOptions($event)">
+        <ion-item button lines="full" (click)="showOptions($event)">
           <ion-icon name="list" slot="start"></ion-icon>
           <ion-label>Menu</ion-label>
         </ion-item>
       </ion-footer>
     </ion-menu>
 
-    <div class="ion-page" main>
+    <ion-router-outlet id="main-content" #content main></ion-router-outlet>
-      <ion-header> </ion-header>
-      <ion-content class="ion-padding">
-        <ion-router-outlet id="main-content"></ion-router-outlet>
-      </ion-content>
-    </div>
   </ion-split-pane>
 </ion-app>

src/app/app.component.ts

@@ -17,7 +17,7 @@ import {SelectorComponent} from './components/sharing/selector/selector.componen
   styleUrls: ['app.component.scss']
 })
 export class AppComponent implements OnInit {
-  @ViewChild('menuTree', {static: false}) menuTree: TreeComponent;
+  @ViewChild('menuTree') menuTree: TreeComponent;
   public addChildTarget: any = false;
   public deleteTarget: any = false;
   public menuTarget: any = false;

src/app/components/editor/code/code.component.ts

@@ -16,7 +16,7 @@ export class CodeComponent implements OnInit {
   @Output() hostRecordChange = new EventEmitter<HostRecord>();
   @Output() requestParentSave = new EventEmitter<CodeComponent>();
   @Output() requestParentDelete = new EventEmitter<CodeComponent>();
-  @ViewChild('theEditor', {static: false}) theEditor;
+  @ViewChild('theEditor') theEditor;
 
   public dirty = false;
   public pendingSetup = true;

src/app/components/editor/database/database.component.ts

@@ -26,7 +26,7 @@ export class DatabaseComponent implements OnInit {
   @Output() hostRecordChange = new EventEmitter<HostRecord>();
   @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
   @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
-  @ViewChild('agGridElement', {static: false}) agGridElement: AgGridAngular;
+  @ViewChild('agGridElement') agGridElement: AgGridAngular;
 
   public dbRecord: any;
   public pendingSetup = true;

src/app/components/editor/database/editors/boolean/boolean-editor.component.ts

@@ -30,7 +30,7 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
     protected falseValue = 'False';
     protected emptyValue = '';
 
-    @ViewChild('input', {static: false}) input: ElementRef;
+    @ViewChild('input') input: ElementRef;
 
     agInit(params: ICellEditorParams): void {
         this.params = params;

src/app/components/editor/database/editors/datetime/datetime-editor.component.ts

@@ -11,7 +11,7 @@ export class DatetimeEditorComponent implements ICellEditorAngularComp, AfterVie
     public params: ICellEditorParams;
     public value: string;
     public format = 'YYYY-MM-DD h:mm a';
-    @ViewChild('picker', {static: false}) picker: IonDatetime;
+    @ViewChild('picker') picker: IonDatetime;
 
     agInit(params: ICellEditorParams): void {
         this.params = params;

src/app/components/editor/database/editors/numeric/numeric-editor.component.ts

@@ -17,7 +17,7 @@ export class NumericEditorComponent implements ICellEditorAngularComp, AfterView
     public value: number;
     private cancelBeforeStart = false;
 
-    @ViewChild('input', {static: false}) input: ElementRef;
+    @ViewChild('input') input: ElementRef;
 
     agInit(params: ICellEditorParams): void {
         this.params = params;

src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts

@@ -18,7 +18,7 @@ export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterVi
     private params: ICellEditorParams;
     public value: string;
 
-    @ViewChild('input', {static: false}) input: ElementRef;
+    @ViewChild('input') input: ElementRef;
 
     constructor(
         protected modals: ModalController,

src/app/components/editor/database/editors/select/multiselect-editor.component.ts

@@ -17,7 +17,7 @@ export class MultiSelectEditorComponent implements ICellEditorAngularComp, After
     public value: string;
 
     public options: Array<{value: string}> = [];
-    @ViewChild('select', {static: false}) select: IonSelect;
+    @ViewChild('select') select: IonSelect;
 
     agInit(params: ICellEditorParams): void {
         this.params = params;

src/app/components/editor/database/editors/select/select-editor.component.ts

@@ -16,7 +16,7 @@ export class SelectEditorComponent implements ICellEditorAngularComp, AfterViewI
     public params: ICellEditorParams;
     public value: string;
     public options: Array<{value: string}> = [];
-    @ViewChild('select', {static: false}) select: IonSelect;
+    @ViewChild('select') select: IonSelect;
 
     agInit(params: ICellEditorParams): void {
         this.params = params;

src/app/components/editor/files/files.component.ts

@@ -16,7 +16,7 @@ export class FilesComponent implements OnInit {
   @Output() hostRecordChange = new EventEmitter<HostRecord>();
   @Output() requestParentSave = new EventEmitter<FilesComponent>();
   @Output() requestParentDelete = new EventEmitter<FilesComponent>();
-  @ViewChild('uploadForm', {static: false}) uploadForm: ElementRef;
+  @ViewChild('uploadForm') uploadForm: ElementRef;
 
   public fileRecords: Array<any> = [];
   public pendingSetup = true;

src/app/components/editor/host/host.component.ts

@@ -14,7 +14,7 @@ export class HostComponent implements OnInit {
   @Output() newHostRequested = new EventEmitter<HostComponent>();
   @Output() destroyHostRequested = new EventEmitter<HostComponent>();
   @Output() saveHostRequested = new EventEmitter<HostComponent>();
-  @ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
+  @ViewChild('hostContainer') hostContainer: ElementRef;
   @ViewChildren('liItems') liItems;
 
   public listLines: Array<string> = [];

src/app/pages/editor/editor.page.html

@@ -2,11 +2,7 @@
   <ion-header (keydown)="onEditorKeydown($event)">
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-menu-toggle>
+        <ion-menu-button></ion-menu-button>
-          <ion-button>
-            <ion-icon slot="icon-only" name="menu"></ion-icon>
-          </ion-button>
-        </ion-menu-toggle>
       </ion-buttons>
       <ion-title #titleBar>
         <div contenteditable="true"> {{ pageRecord.Name }} </div>

src/app/pages/editor/editor.page.ts

@@ -19,7 +19,7 @@ export class EditorPage implements OnInit {
   public visibleButtons: Array<number> = [];
 
   @ViewChildren('editorHosts') editorHosts;
-  @ViewChild('titleBar', {static: false}) titleBar;
+  @ViewChild('titleBar') titleBar;
 
   constructor(
     protected pages: PageService,