Upgrade to Angular 8 (#4221)

.travis.yml

@@ -26,7 +26,7 @@ _use_chrome: &_use_chrome
 _use_nodejs: &_use_nodejs
   language: node_js
   node_js:
-    - "8"
+    - "10"
 
 sudo: required
 dist: xenial

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

docker/db-init/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8.11.2-alpine
+FROM node:10.16.0-alpine
 
 RUN apk update ;\
     apk add --no-cache bash curl git jq ca-certificates;\

docker/planet/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8.11.2-alpine as builder
+FROM node:10.16.0-alpine as builder
 LABEL maintainer="sahil@ole.org,mappuji@ole.org"
 
 ARG LANGUAGE_MODE="single"

e2e/login.e2e-spec.ts

@@ -1,6 +1,5 @@
 import { LoginPage } from './login.po';
-import { browser, by, element } from 'protractor';
-import fs = require('fs');
+import { browser } from 'protractor';
 
 describe('Login', () => {
   let page: LoginPage;
@@ -22,7 +21,7 @@ describe('Login', () => {
     passInput.sendKeys('e2e');
     page.clickSignin();
     browser.getCurrentUrl().then((url) => {
-      expect(url).toEqual('http://localhost:4200/');
+      expect(url).toEqual('http://localhost:3000/');
     });
   });
 

e2e/userHandler.ts

@@ -12,7 +12,7 @@ module.exports = function(timeStamp) {
         method: 'PUT',
         uri: 'http://127.0.0.1:5984/_users/org.couchdb.user:' + user,
         headers: { 'Content-Type': 'application/json' },
-        body: { name: user, password: 'e2e', roles: [], type: 'user' },
+        body: { name: user, password: 'e2e', roles: [ 'learner' ], type: 'user' },
         json: true
       });
     },

package.json

@@ -25,63 +25,62 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "7.1.3",
-    "@angular/cdk": "^7.1.1",
-    "@angular/common": "7.1.3",
-    "@angular/compiler": "7.1.3",
-    "@angular/core": "7.1.3",
-    "@angular/forms": "7.1.3",
-    "@angular/material": "^7.1.1",
-    "@angular/platform-browser": "7.1.3",
-    "@angular/platform-browser-dynamic": "7.1.3",
-    "@angular/platform-server": "7.1.3",
-    "@angular/router": "7.1.3",
-    "@angular/service-worker": "7.1.3",
-    "@covalent/markdown": "^1.0.1",
-    "@covalent/text-editor": "^1.0.0",
+    "@angular/animations": "8.1.0",
+    "@angular/cdk": "^8.0.2",
+    "@angular/common": "8.1.0",
+    "@angular/compiler": "8.1.0",
+    "@angular/core": "8.1.0",
+    "@angular/forms": "8.1.0",
+    "@angular/material": "^8.0.2",
+    "@angular/platform-browser": "8.1.0",
+    "@angular/platform-browser-dynamic": "8.1.0",
+    "@angular/platform-server": "8.1.0",
+    "@angular/router": "8.1.0",
+    "@angular/service-worker": "8.1.0",
+    "@covalent/markdown": "^2.1.0",
+    "@covalent/text-editor": "^2.1.0",
     "@types/cropperjs": "^1.1.2",
     "chart.js": "^2.7.3",
-    "core-js": "^2.5.1",
     "cropperjs": "^1.3.4",
     "jszip": "^3.1.5",
     "material-design-icons": "^3.0.1",
-    "material-icons": "^0.1.0",
+    "material-icons": "^0.3.1",
     "mime": "^2.4.3",
     "ngx-img": "^10.15.0",
     "pouchdb": "^7.0.0",
     "pouchdb-authentication": "^1.1.3",
     "pouchdb-find": "^7.0.0",
-    "rxjs": "6.4.0",
+    "rxjs": "6.5.2",
     "showdown": "1.6.4",
-    "zone.js": "~0.8.26"
+    "tslib": "^1.9.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.6",
-    "@angular/cli": "^7.1.3",
-    "@angular/compiler-cli": "7.1.3",
-    "@angular/language-service": "7.1.3",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
+    "@angular-devkit/build-angular": "~0.801.2",
+    "@angular/cli": "^8.1.0",
+    "@angular/compiler-cli": "8.1.0",
+    "@angular/language-service": "8.1.0",
+    "@types/jasmine": "~3.3.13",
+    "@types/jasminewd2": "~2.0.6",
+    "@types/node": "~12.0.12",
     "@types/pouchdb": "^6.3.2",
     "@types/pouchdb-find": "^6.3.3",
-    "codelyzer": "~3.2.0",
+    "codelyzer": "^5.0.1",
     "htmlhint-ng2": "0.0.13",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "node-sass": "^4.5.3",
-    "protractor": "~5.1.2",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "^2.0.5",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.2",
     "request-promise": "^4.2.1",
-    "sass-lint": "^1.12.1",
-    "ts-node": "~3.2.0",
-    "tslint": "~5.3.2",
-    "tslint-eslint-rules": "^4.1.1",
-    "typescript": "3.1.6"
+    "sass-lint": "^1.13.1",
+    "ts-node": "~8.3.0",
+    "tslint": "~5.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "typescript": "3.4.5"
   }
 }

protractor.conf.js

@@ -14,7 +14,7 @@ exports.config = {
   capabilities: {
     'browserName': 'chrome',
     'chromeOptions': {
-      args: [ "--headless", "--disable-gpu", "--window-size=1280,800" ]
+      args: [ "--headless", "--disable-gpu", "--window-size=1280,800", "--no-sandbox" ]
     }
   },
   directConnect: true,

src/app/app-router.module.ts

@@ -5,8 +5,8 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
 import { AuthService } from './shared/auth-guard.service';
 
 export const routes: Routes = [
-  { path: '', loadChildren: './home/home.module#HomeModule', canActivateChild: [ AuthService ] },
-  { path: 'login', loadChildren: './login/login.module#LoginModule', canActivate: [ AuthService ] },
+  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule), canActivateChild: [ AuthService ] },
+  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule), canActivate: [ AuthService ] },
   { path: '**', component: PageNotFoundComponent }
 ];
 

src/app/community/community-table.component.ts

@@ -42,8 +42,8 @@ export class CommunityTableComponent implements OnChanges, AfterViewInit, OnDest
   onDestroy$ = new Subject<void>();
   planetType = this.stateService.configuration.planetType;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
 
   constructor(
     private couchService: CouchService,

src/app/configuration/configuration.component.ts

@@ -37,7 +37,7 @@ const removeProtocol = (str: string) => {
   ` ]
 })
 export class ConfigurationComponent implements OnInit {
-  @ViewChild('stepper') stepper: MatStepper;
+  @ViewChild('stepper', { static: false }) stepper: MatStepper;
   configurationType = 'new';
   nationOrCommunity = 'community';
   message = '';

src/app/courses/courses.component.ts

@@ -52,8 +52,8 @@ export class CoursesComponent implements OnInit, AfterViewInit, OnDestroy {
   selectedEnrolled = 0;
   selectedLocal = 0;
   courses = new MatTableDataSource();
-  @ViewChild(MatSort) sort: MatSort;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
   dialogRef: MatDialogRef<DialogsListComponent>;
   message = '';
   deleteDialog: any;
@@ -93,7 +93,7 @@ export class CoursesComponent implements OnInit, AfterViewInit, OnDestroy {
     filterShelf(this.myCoursesFilter, 'admission')
   ]);
 
-  @ViewChild(PlanetTagInputComponent)
+  @ViewChild(PlanetTagInputComponent, { static: false })
   private tagInputComponent: PlanetTagInputComponent;
 
   constructor(

src/app/courses/progress-courses/courses-progress-chart.component.ts

@@ -20,8 +20,8 @@ export class CoursesProgressChartComponent implements OnChanges {
   @Input() showTotals = true;
   @Output() changeData = new EventEmitter<{ set, index }>();
   @ViewChildren('errorsTotal, errorsIndex') yScrollElements;
-  @ViewChild('errorsUserTotal') xScrollElement;
-  @ViewChild('errorsUser') dataElement;
+  @ViewChild('errorsUserTotal', { static: false }) xScrollElement;
+  @ViewChild('errorsUser', { static: false }) dataElement;
   sets = [];
   horizTotals = [];
 

src/app/dashboard/dashboard-tile.component.ts

@@ -19,7 +19,7 @@ export class DashboardTileComponent implements OnInit {
   @Input() emptyLink = '/';
   @Input() shelfName: string;
   @Output() teamRemoved = new EventEmitter<any>();
-  @ViewChild('items') itemDiv: ElementRef;
+  @ViewChild('items', { static: false }) itemDiv: ElementRef;
 
   constructor(
     private planetMessageService: PlanetMessageService,

src/app/feedback/feedback-view.component.ts

@@ -23,7 +23,7 @@ export class FeedbackViewComponent implements OnInit, OnDestroy {
   newMessage = '';
   isActive = true;
   editTitleMode = false;
-  @ViewChild('chatList') chatListElement: ElementRef;
+  @ViewChild('chatList', { static: false }) chatListElement: ElementRef;
 
   constructor(
     private couchService: CouchService,

src/app/feedback/feedback.component.ts

@@ -45,8 +45,8 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
     this.feedback.filter = value ? value : this.dropdownsFill();
     this._titleSearch = value;
   }
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
   user: any = {};
   private onDestroy$ = new Subject<void>();
   emptyData = false;

src/app/home/home-router.module.ts

@@ -14,23 +14,29 @@ const routes: Routes = [
   { path: '', component: HomeComponent,
     children: [
       { path: '', component: DashboardComponent },
-      { path: 'users', loadChildren: '../users/users.module#UsersModule' },
-      { path: 'manager', loadChildren: '../manager-dashboard/manager-dashboard.module#ManagerDashboardModule' },
-      { path: 'courses', loadChildren: '../courses/courses.module#CoursesModule' },
-      { path: 'myCourses', loadChildren: '../courses/courses.module#CoursesModule', data: { myCourses: true } },
+      { path: 'users', loadChildren: () => import('../users/users.module').then(m => m.UsersModule) },
+      { path: 'manager', loadChildren: () => import('../manager-dashboard/manager-dashboard.module').then(m => m.ManagerDashboardModule) },
+      { path: 'courses', loadChildren: () => import('../courses/courses.module').then(m => m.CoursesModule) },
+      { path: 'myCourses', loadChildren: () => import('../courses/courses.module').then(m => m.CoursesModule), data: { myCourses: true } },
       { path: 'requests', component: CommunityComponent },
-      { path: 'feedback', loadChildren: '../feedback/feedback.module#FeedbackModule' },
-      { path: 'resources', loadChildren: '../resources/resources.module#ResourcesModule' },
-      { path: 'myLibrary', loadChildren: '../resources/resources.module#ResourcesModule', data: { myLibrary: true } },
-      { path: 'meetups', loadChildren: '../meetups/meetups.module#MeetupsModule' },
+      { path: 'feedback', loadChildren: () => import('../feedback/feedback.module').then(m => m.FeedbackModule) },
+      { path: 'resources', loadChildren: () => import('../resources/resources.module').then(m => m.ResourcesModule) },
+      {
+        path: 'myLibrary',
+        loadChildren: () => import('../resources/resources.module').then(m => m.ResourcesModule), data: { myLibrary: true }
+      },
+      { path: 'meetups', loadChildren: () => import('../meetups/meetups.module').then(m => m.MeetupsModule) },
       { path: 'notifications', component: NotificationsComponent },
-      { path: 'submissions', loadChildren: '../submissions/submissions.module#SubmissionsModule' },
-      { path: 'submissions/:type', loadChildren: '../submissions/submissions.module#SubmissionsModule' },
-      { path: 'mySurveys', loadChildren: '../submissions/submissions.module#SubmissionsModule', data: { mySurveys: true } },
+      { path: 'submissions', loadChildren: () => import('../submissions/submissions.module').then(m => m.SubmissionsModule) },
+      { path: 'submissions/:type', loadChildren: () => import('../submissions/submissions.module').then(m => m.SubmissionsModule) },
+      {
+        path: 'mySurveys',
+        loadChildren: () => import('../submissions/submissions.module').then(m => m.SubmissionsModule), data: { mySurveys: true }
+      },
       { path: 'upgrade', component: UpgradeComponent },
       { path: 'upgrade/myplanet', component: UpgradeComponent, data: { myPlanet: true } },
-      { path: 'teams', loadChildren: '../teams/teams.module#TeamsModule' },
-      { path: 'surveys', loadChildren: '../surveys/surveys.module#SurveysModule' },
+      { path: 'teams', loadChildren: () => import('../teams/teams.module').then(m => m.TeamsModule) },
+      { path: 'surveys', loadChildren: () => import('../surveys/surveys.module').then(m => m.SurveysModule) },
       { path: 'myAchievements', component: UsersAchievementsComponent },
       { path: 'myAchievements/update', component: UsersAchievementsUpdateComponent },
       { path: 'news', component: NewsComponent },

src/app/home/home.component.ts

@@ -35,8 +35,8 @@ export class HomeComponent implements OnInit, DoCheck, AfterViewChecked, OnDestr
   forceModern: boolean;
   sidenavState = 'closed';
   classicToolbarWidth = 0;
-  @ViewChild('content') private mainContent;
-  @ViewChild('toolbar', { read: ElementRef }) private toolbar: ElementRef;
+  @ViewChild('content', { static: false }) private mainContent;
+  @ViewChild('toolbar', { read: ElementRef, static: false }) private toolbar: ElementRef;
   planetName;
 
   // Sets the margin for the main content to match the sidenav width
@@ -97,7 +97,6 @@ export class HomeComponent implements OnInit, DoCheck, AfterViewChecked, OnDestr
         toolbarElement.querySelector('.navbar-right').offsetWidth +
         parseInt(toolbarStyle.paddingLeft, 10) +
         parseInt(toolbarStyle.paddingRight, 10);
-      this.mainContent._updateContentMargins();
       this.mainContent._changeDetectorRef.markForCheck();
     }
   }

src/app/manager-dashboard/manager-fetch.component.ts

@@ -25,8 +25,8 @@ import { PlanetMessageService } from '../shared/planet-message.service';
 
 export class ManagerFetchComponent implements OnInit, AfterViewInit {
   selection = new SelectionModel(true, []);
-  @ViewChild(MatSort) sort: MatSort;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
   planetConfiguration = this.stateService.configuration;
   displayedColumns = [ 'select', 'item', 'date' ];
   pushedItems = new MatTableDataSource();

src/app/manager-dashboard/manger-dashboard-router.module.ts

@@ -13,11 +13,11 @@ const routes: Routes = [
   { path: '', component: ManagerDashboardComponent },
   { path: 'sync', component: ManagerSyncComponent },
   { path: 'fetch', component: ManagerFetchComponent },
-  { path: 'meetups', loadChildren: '../meetups/meetups.module#MeetupsModule', data: { parent: true } },
-  { path: 'courses', loadChildren: '../courses/courses.module#CoursesModule', data: { parent: true } },
-  { path: 'resources', loadChildren: '../resources/resources.module#ResourcesModule', data: { parent: true } },
+  { path: 'meetups', loadChildren: () => import('../meetups/meetups.module').then(m => m.MeetupsModule), data: { parent: true } },
+  { path: 'courses', loadChildren: () => import('../courses/courses.module').then(m => m.CoursesModule), data: { parent: true } },
+  { path: 'resources', loadChildren: () => import('../resources/resources.module').then(m => m.ResourcesModule), data: { parent: true } },
   { path: 'configuration', component: ManagerDashboardConfigurationComponent, data: { update: true } },
-  { path: 'users', loadChildren: '../users/users.module#UsersModule' },
+  { path: 'users', loadChildren: () => import('../users/users.module').then(m => m.UsersModule) },
   { path: 'reports', component: ReportsComponent },
   { path: 'reports/detail', component: ReportsDetailComponent },
   { path: 'reports/pending', component: ReportsPendingComponent },

src/app/manager-dashboard/reports/myplanet-table.component.ts

@@ -11,8 +11,8 @@ export class MyPlanetTableComponent implements OnChanges, AfterViewInit {
   myPlanets = new MatTableDataSource();
   displayedColumns = [ 'id', 'name', 'lastSynced', 'version', 'count' ];
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
 
   ngOnChanges() {
     this.myPlanets.data = this.data;

src/app/manager-dashboard/reports/pending-table.component.ts

@@ -22,7 +22,7 @@ export class PendingTableComponent implements OnChanges, AfterViewInit {
   items = new MatTableDataSource();
   displayedColumns = [ 'item', 'date', 'actions' ];
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
 
   constructor(
     private couchService: CouchService,

src/app/manager-dashboard/reports/reports-table.component.ts

@@ -19,8 +19,8 @@ export class ReportsTableComponent implements OnChanges, AfterViewInit {
     'lastUpgrade',
     'lastSync'
   ];
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
 
   constructor() {}
 

src/app/meetups/meetups.component.ts

@@ -36,8 +36,8 @@ export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
   deleteDialog: any;
   selection = new SelectionModel(true, []);
   onDestroy$ = new Subject<void>();
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
   parent = this.route.snapshot.data.parent;
   displayedColumns = this.parent ? [ 'title' ] : [ 'select', 'title', 'info' ];
   getOpts = this.parent ? { domain: this.stateService.configuration.parentDomain } : {};