fix(app): fix bugs related to updating to 8th angular version

Author: shoudaos

package-lock.json

@@ -24,7 +24,7 @@
     "@angular/router": "8.0.0",
     "@ngx-loading-bar/core": "4.1.1",
     "@ngx-loading-bar/router": "4.1.1",
-    "@swimlane/ngx-datatable": "^14.0.0",
+    "@swimlane/ngx-datatable": "15.0.2",
     "@tinymce/tinymce-angular": "2.2.0",
     "angular2-text-mask": "8.0.5",
     "animate.css": "3.5.2",

package.json

@@ -33,8 +33,8 @@ export class LayoutComponent implements OnInit {
   $sidebar: any;
   el: ElementRef;
   router: Router;
-  @ViewChild('spinnerElement') spinnerElement: ElementRef;
-  @ViewChild('routerComponent') routerComponent: ElementRef;
+  @ViewChild('spinnerElement', {static: true}) spinnerElement: ElementRef;
+  @ViewChild('routerComponent', {static: true}) routerComponent: ElementRef;
 
   constructor(config: AppConfig,
               el: ElementRef,

src/app/layout/layout.component.ts

@@ -97,8 +97,8 @@ export class AnalyticsComponent implements OnInit {
     ]
   ];
 
-  @ViewChild('chartContainer') chartContainer: ElementRef;
-  @ViewChild('chartLegend') chartLegend: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
+  @ViewChild('chartLegend', {static: true}) chartLegend: ElementRef;
 
   trends: Array<any> = [
     {

src/app/pages/analytics/analytics.component.ts

@@ -7,7 +7,7 @@ declare let jQuery: any;
   templateUrl: './bars-chart.html'
 })
 export class BarsChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
 
   getBarChartData() { /* eslint-disable */
     return [

src/app/pages/charts/flot/components/bars-chart/bars-chart.ts

@@ -7,7 +7,7 @@ declare let jQuery: any;
   templateUrl: './bars-stacked-chart.html'
 })
 export class BarsStackedChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
 
   getStackedBarChartData() {
     const seriesCount = 3;

src/app/pages/charts/flot/components/bars-stacked-chart/bars-stacked-chart.ts

@@ -7,8 +7,8 @@ declare let jQuery: any;
   templateUrl: './donut-chart.html'
 })
 export class DonutChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
-  @ViewChild('chartLegend') chartLegend: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
+  @ViewChild('chartLegend', {static: true}) chartLegend: ElementRef;
 
   getPieChartData() {
     const data = [];

src/app/pages/charts/flot/components/donut-chart/donut-chart.ts

@@ -7,7 +7,7 @@ declare let jQuery: any;
   templateUrl: './line-chart.html'
 })
 export class LineChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
 
   options: any = {
     xaxis: {

src/app/pages/charts/flot/components/line-chart/line-chart.ts

@@ -7,7 +7,7 @@ declare let jQuery: any;
   templateUrl: './markers-chart.html'
 })
 export class MarkersChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
 
   data: Array<any> = [
     { data: this.generate(2, 0.6), points: { symbol: 'circle' } },

src/app/pages/charts/flot/components/markers-chart/markers-chart.ts

@@ -7,7 +7,7 @@ declare let jQuery: any;
   templateUrl: './pie-chart.html'
 })
 export class PieChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
 
   getPieChartData() {
     const data = [];

src/app/pages/charts/flot/components/pie-chart/pie-chart.ts

@@ -7,7 +7,7 @@ declare let jQuery: any;
   templateUrl: './tracking-chart.html'
 })
 export class TrackingChartComponent implements AfterViewInit {
-  @ViewChild('chartContainer') chartContainer: ElementRef;
+  @ViewChild('chartContainer', {static: true}) chartContainer: ElementRef;
 
   chart: any;
   legend: any;

src/app/pages/charts/flot/components/tracking-chart/tracking-chart.ts

@@ -18,8 +18,8 @@ import 'jquery-sparkline';
   templateUrl: './flot.html'
 })
 export class FlotComponent implements AfterViewInit {
-  @ViewChild('sparklines1') sparklines1: ElementRef;
-  @ViewChild('sparklines2') sparklines2: ElementRef;
+  @ViewChild('sparklines1', {static: true}) sparklines1: ElementRef;
+  @ViewChild('sparklines2', {static: true}) sparklines2: ElementRef;
 
   initSparkline(ref) {
     const spark = jQuery(this[ref].nativeElement);

src/app/pages/charts/flot/flot.ts

@@ -11,12 +11,12 @@ declare let jQuery: any;
   templateUrl: './morris.html'
 })
 export class MorrisComponent implements AfterViewInit {
-  @ViewChild('morrisLineChart') morrisLineChart: ElementRef;
-  @ViewChild('morrisAreaChart') morrisAreaChart: ElementRef;
-  @ViewChild('morrisBarChart') morrisBarChart: ElementRef;
-  @ViewChild('morrisDonutChart') morrisDonutChart: ElementRef;
-  @ViewChild('morrisBar2Chart') morrisBar2Chart: ElementRef;
-  @ViewChild('morrisStackedChart') morrisStackedChart: ElementRef;
+  @ViewChild('morrisLineChart', {static: true}) morrisLineChart: ElementRef;
+  @ViewChild('morrisAreaChart', {static: true}) morrisAreaChart: ElementRef;
+  @ViewChild('morrisBarChart', {static: true}) morrisBarChart: ElementRef;
+  @ViewChild('morrisDonutChart', {static: true}) morrisDonutChart: ElementRef;
+  @ViewChild('morrisBar2Chart', {static: true}) morrisBar2Chart: ElementRef;
+  @ViewChild('morrisStackedChart', {static: true}) morrisStackedChart: ElementRef;
 
   initMorrisLineChart() {
     jQuery(this.morrisLineChart.nativeElement).html('');

src/app/pages/charts/morris/morris.ts

@@ -12,7 +12,7 @@ declare let nv: any;
   encapsulation: ViewEncapsulation.None
 })
 export class OverviewComponent implements OnInit {
-  @ViewChild('sparklineLineChart') sparklineLineChart: ElementRef;
+  @ViewChild('sparklineLineChart', {static: true}) sparklineLineChart: ElementRef;
 
   seriesData: Array<any> = [ [], [] ];
   random: any;

src/app/pages/charts/overview/overview.ts

@@ -8,13 +8,13 @@ declare let jQuery: any;
   templateUrl: './sparkline.html'
 })
 export class SparklineComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('sparkline1') sparkline1: ElementRef;
-  @ViewChild('sparkline2') sparkline2: ElementRef;
-  @ViewChild('sparkline3') sparkline3: ElementRef;
-  @ViewChild('sparkline4') sparkline4: ElementRef;
-  @ViewChild('sparkline5') sparkline5: ElementRef;
-  @ViewChild('sparkline6') sparkline6: ElementRef;
-  @ViewChild('sparkline7') sparkline7: ElementRef;
+  @ViewChild('sparkline1', {static: true}) sparkline1: ElementRef;
+  @ViewChild('sparkline2', {static: true}) sparkline2: ElementRef;
+  @ViewChild('sparkline3', {static: true}) sparkline3: ElementRef;
+  @ViewChild('sparkline4', {static: true}) sparkline4: ElementRef;
+  @ViewChild('sparkline5', {static: true}) sparkline5: ElementRef;
+  @ViewChild('sparkline6', {static: true}) sparkline6: ElementRef;
+  @ViewChild('sparkline7', {static: true}) sparkline7: ElementRef;
 
   generateRandomArr(length, min = null, max = null, isFloat = false) { // eslint-disable-line
     const result = [];

src/app/pages/charts/sparkline/sparkline.ts

@@ -17,7 +17,7 @@ export class CalendarComponent implements OnInit, AfterViewInit {
   createEvent: any;
   calendarEvent: string = null;
 
-  @ViewChild('modalWindow') public modalWindow: ModalDirective;
+  @ViewChild('modalWindow', {static: true}) public modalWindow: ModalDirective;
 
   constructor() {
     const date = new Date();

src/app/pages/extra/calendar/calendar.component.ts

@@ -9,7 +9,7 @@ declare let jQuery: any;
 export class BootstrapApplicationWizardComponent implements OnInit, AfterViewInit {
   $el: any;
 
-  @ViewChild('wizard') wizard: ElementRef;
+  @ViewChild('wizard', {static: true}) wizard: ElementRef;
 
   constructor() {
   }

src/app/pages/forms/wizard/bootstrap-application-wizard/bootstrap-application-wizard.component.ts

@@ -279,7 +279,7 @@ export class TablesDynamicComponent implements OnInit {
   people: any[] = PEOPLE;
   peopleTemp: any[] = [...PEOPLE];
 
-  @ViewChild(DatatableComponent) table: DatatableComponent;
+  @ViewChild(DatatableComponent, {static: true}) table: DatatableComponent;
 
   rows: Array<any> = [];
   columns: Array<any> = [

src/app/pages/tables/dynamic/tables-dynamic.component.ts

@@ -14,7 +14,7 @@ export class CalendarComponent implements AfterViewInit {
   @Input() events: Array<any>;
   @Input() white: boolean = false;
 
-  @ViewChild('calendarWrapper') el: ElementRef;
+  @ViewChild('calendarWrapper', {static: true}) el: ElementRef;
 
   render(): void {
     const monthNames = [