Angular 8

AngularClient/package.json

@@ -25,55 +25,57 @@
     "path": false
   },
   "dependencies": {
-    "@angular/animations": "7.1.0",
-    "@angular/cdk": "7.1.0",
-    "@angular/common": "7.1.0",
-    "@angular/core": "7.1.0",
-    "@angular/flex-layout": "7.0.0-beta.19",
-    "@angular/forms": "7.1.0",
-    "@angular/material": "7.1.0",
-    "@angular/platform-browser": "7.1.0",
-    "@angular/platform-browser-dynamic": "7.1.0",
-    "@angular/router": "7.1.0",
+    "@angular/animations": "8.0.0",
+    "@angular/cdk": "8.0.0",
+    "@angular/common": "8.0.0",
+    "@angular/core": "8.0.0",
+    "@angular/flex-layout": "8.0.0-beta.26",
+    "@angular/forms": "8.0.0",
+    "@angular/material": "8.0.0",
+    "@angular/platform-browser": "8.0.0",
+    "@angular/platform-browser-dynamic": "8.0.0",
+    "@angular/router": "8.0.0",
     "@forcrowd/backbone-client-core": "0.2.3",
-    "angulartics2": "7.2.0",
+    "angulartics2": "7.5.2",
     "breeze-client": "1.7.1",
-    "core-js": "2.5.7",
+    "browserlist": "1.0.1",
+    "caniuse-lite": "1.0.30000971",
+    "core-js": "3.1.3",
     "font-awesome": "4.7.0",
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
-    "jquery": "3.3.1",
-    "moment": "2.22.2",
-    "ngx-moment": "3.2.0",
+    "jquery": "3.4.1",
+    "moment": "2.24.0",
+    "ngx-moment": "3.4.0",
     "respond.js": "1.4.2",
-    "rxjs": "6.3.3",
+    "rxjs": "6.5.2",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.26"
+    "zone.js": "0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.11.0",
-    "@angular-devkit/build-ng-packagr": "0.11.0",
-    "@angular/cli": "7.1.0",
-    "@angular/compiler": "7.1.0",
-    "@angular/compiler-cli": "7.1.0",
-    "@angular/language-service": "7.1.0",
-    "@types/jasmine": "3.3.0",
+    "@angular-devkit/build-angular": "0.800.0",
+    "@angular-devkit/build-ng-packagr": "0.800.0",
+    "@angular/cli": "8.0.0",
+    "@angular/compiler": "8.0.0",
+    "@angular/compiler-cli": "8.0.0",
+    "@angular/language-service": "8.0.0",
+    "@types/jasmine": "3.3.13",
     "@types/jasminewd2": "2.0.6",
-    "@types/node": "10.12.10",
-    "codelyzer": "4.5.0",
-    "jasmine-core": "3.3.0",
+    "@types/node": "12.0.3",
+    "codelyzer": "5.0.1",
+    "jasmine-core": "3.4.0",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "3.1.1",
+    "karma": "4.1.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.4",
+    "karma-coverage-istanbul-reporter": "2.0.5",
     "karma-jasmine": "2.0.1",
-    "karma-jasmine-html-reporter": "1.4.0",
-    "ng-packagr": "4.4.0",
-    "protractor": "5.4.1",
-    "ts-node": "7.0.1",
-    "tsickle": "0.34.0",
+    "karma-jasmine-html-reporter": "1.4.2",
+    "ng-packagr": "5.2.0",
+    "protractor": "5.4.2",
+    "ts-node": "8.2.0",
+    "tsickle": "0.35.0",
     "tslib": "1.9.3",
-    "tslint": "5.11.0",
-    "typescript": "3.1.6"
+    "tslint": "5.16.0",
+    "typescript": "3.4.1"
   }
 }

AngularClient/projects/backbone-client-core/package.json

@@ -11,9 +11,9 @@
     "source-map": "0.7.3"
   },
   "peerDependencies": {
-    "@angular/common": "7.1.0",
-    "@angular/core": "7.1.0",
-    "rxjs": "6.3.3"
+    "@angular/common": "8.0.0",
+    "@angular/core": "8.0.0",
+    "rxjs": "6.5.2"
   },
   "browser": {
     "fs": false,

AngularClient/src/main/core/components/core.component.html

@@ -123,7 +123,7 @@
           Contributors
         </a>
         <a mat-button href="https://github.com/forCrowd/Backbone/blob/master/CHANGELOG.md" target="_blank" class="footer-right">
-          Version 0.9.30
+          Version 0.9.31
         </a>
       </div>
     </mat-sidenav-content>

AngularClient/src/main/core/components/core.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
-import { ObservableMedia } from "@angular/flex-layout";
+import { MediaObserver } from "@angular/flex-layout";
 import { MatSnackBar } from "@angular/material";
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { Title } from "@angular/platform-browser";
@@ -31,7 +31,7 @@ export class CoreComponent implements OnDestroy, OnInit {
     private notificationService: NotificationService,
     private titleService: Title,
     private router: Router,
-    private media: ObservableMedia) {
+    private media: MediaObserver) {
       this.angulartics.startTracking();
       this.currentUser = this.authService.currentUser;
   }
@@ -98,7 +98,7 @@ export class CoreComponent implements OnDestroy, OnInit {
     this.subscriptions.push(currentUserChangedSubscription);
 
     // Media queries
-    var mediaSubscription = this.media.subscribe(change => {
+    var mediaSubscription = this.media.media$.subscribe(change => {
       this.mediaQuery = change.mqAlias;
     });
     this.subscriptions.push(mediaSubscription);

AngularClient/src/main/core/components/profile.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { SelectionModel } from "@angular/cdk/collections";
-import { ObservableMedia } from "@angular/flex-layout";
+import { MediaObserver } from "@angular/flex-layout";
 import { ActivatedRoute, Router } from "@angular/router";
 import { MatDialog, MatTableDataSource } from "@angular/material";
 import { AuthService, Project, ProjectService, User } from "@forcrowd/backbone-client-core";
@@ -33,7 +33,7 @@ export class ProfileComponent implements OnDestroy, OnInit {
     private dialog: MatDialog,
     private projectService: ProjectService,
     private router: Router,
-    private media: ObservableMedia) {
+    private media: MediaObserver) {
   }
 
   confirmRemove() {
@@ -103,7 +103,7 @@ export class ProfileComponent implements OnDestroy, OnInit {
       });
 
     // Media queries
-    var mediaSubscription = this.media.subscribe(change => {
+    var mediaSubscription = this.media.media$.subscribe(change => {
       this.mediaQuery = change.mqAlias;
       this.setColumns();
     });

AngularClient/src/main/core/components/search.component.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 import { MatTableDataSource } from "@angular/material";
-import { ObservableMedia, MediaChange } from "@angular/flex-layout";
+import { MediaObserver, MediaChange } from "@angular/flex-layout";
 import { Project, ProjectService } from "@forcrowd/backbone-client-core";
 import { finalize } from "rxjs/operators";
 
@@ -21,12 +21,12 @@ export class SearchComponent {
   constructor(private projectService: ProjectService,
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private media: ObservableMedia) {
+    private media: MediaObserver) {
       this.activatedRoute.url.subscribe(url =>{
         this.searchKey = url[1].parameters.searchKey;
         this.search();
       });
-      this.media.subscribe((change: MediaChange) => {
+      this.media.media$.subscribe((change: MediaChange) => {
         if ( change.mqAlias === "xs" ) {
           this.displayedColumns = ["name", "userName"];
         } else {

AngularClient/src/main/project/element-field-manager.component.ts

@@ -17,7 +17,7 @@ export class ElementFieldManagerComponent implements OnInit {
   @Input() project: Project = null;
   @Input() projectOwner: boolean = null;
   @Output() isEditingChanged = new EventEmitter<boolean>();
-  @ViewChild(MatTable) matTable: MatTable<any>;
+  @ViewChild(MatTable, {static: false}) matTable: MatTable<any>;
 
   selection = new SelectionModel<ElementField>(true, []);
   elementFieldDisplayedColumns = ["select", "element", "name", "dataType", "createdOn"];

AngularClient/src/main/project/element-item-manager.component.ts

@@ -16,7 +16,7 @@ export class ElementItemManagerComponent implements OnInit {
   @Input() project: Project = null;
   @Input() projectOwner: boolean = null;
   @Output() isEditingChanged = new EventEmitter<boolean>();
-  @ViewChild(MatTable) matTable: MatTable<any>;
+  @ViewChild(MatTable, {static: false}) matTable: MatTable<any>;
 
   selection = new SelectionModel<ElementItem>(true, []);
   elementItemDisplayedColumns = ["select", "element", "name", "createdOn"];

AngularClient/src/main/project/element-manager.component.ts

@@ -17,7 +17,7 @@ export class ElementManagerComponent implements OnInit {
   @Input() project: Project = null;
   @Input() projectOwner: boolean = null;
   @Output() isEditingChanged = new EventEmitter<boolean>();
-  @ViewChild(MatTable) matTable: MatTable<any>;
+  @ViewChild(MatTable, {static: false}) matTable: MatTable<any>;
 
   selection = new SelectionModel<Element>(true, []);
   elementDisplayedColumns = ["select", "name", "createdOn"];

AngularClient/src/polyfills.ts

@@ -11,28 +11,13 @@
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
- * BROWSER POLYFILLS
- */
+* BROWSER POLYFILLS
+*/
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-import "core-js/es6/symbol";
-import "core-js/es6/object";
-import "core-js/es6/function";
-import "core-js/es6/parse-int";
-import "core-js/es6/parse-float";
-import "core-js/es6/number";
-import "core-js/es6/math";
-import "core-js/es6/string";
-import "core-js/es6/date";
-import "core-js/es6/array";
-import "core-js/es6/regexp";
-import "core-js/es6/map";
-import "core-js/es6/weak-map";
-import "core-js/es6/set";
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 //import "classlist.js";  // Run `npm install --save classlist.js`.

AngularClient/src/tsconfig.app.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "types": []
   },
   "exclude": [

AngularClient/src/tsconfig.spec.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "module": "commonjs",
     "types": [
       "jasmine",
       "node"

AngularClient/tsconfig.json

@@ -5,11 +5,11 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

AngularClient/tslint.json

@@ -117,12 +117,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true

CHANGELOG.md

@@ -1,5 +1,9 @@
 ### Changelog
 
+**0.9.31**
+
+* AngularClient - Upgrade to Angular 8
+
 **0.9.30**
 
 * AngularClient - UI fix