Migrate to Angular version 7.2.14

New version of TS-Lint
New version of ngx-file-drop with breaking changes
npm audits
Removed Terser, should work out of the box again

client/package.json

@@ -25,57 +25,57 @@
         "prettify-write": "prettier --config ./.prettierrc --write \"src/{app,environments}/**/*{.ts,.js,.json,.css,.scss}\""
     },
     "dependencies": {
-        "@angular/animations": "^7.2.5",
+        "@angular/animations": "^7.2.14",
-        "@angular/cdk": "^7.3.2",
+        "@angular/cdk": "^7.3.7",
-        "@angular/common": "^7.2.5",
+        "@angular/common": "^7.2.14",
-        "@angular/compiler": "^7.2.5",
+        "@angular/compiler": "^7.2.14",
-        "@angular/core": "^7.2.5",
+        "@angular/core": "^7.2.14",
-        "@angular/forms": "^7.2.5",
+        "@angular/forms": "^7.2.14",
-        "@angular/http": "^7.2.5",
+        "@angular/http": "^7.2.14",
-        "@angular/material": "^7.3.2",
+        "@angular/material": "^7.3.7",
-        "@angular/platform-browser": "^7.2.5",
+        "@angular/platform-browser": "^7.2.14",
-        "@angular/platform-browser-dynamic": "^7.2.5",
+        "@angular/platform-browser-dynamic": "^7.2.14",
-        "@angular/pwa": "^0.13.2",
+        "@angular/pwa": "^0.13.8",
-        "@angular/router": "^7.2.5",
+        "@angular/router": "^7.2.14",
-        "@angular/service-worker": "^7.2.5",
+        "@angular/service-worker": "^7.2.14",
         "@ngx-pwa/local-storage": "^7.4.1",
         "@ngx-translate/core": "^11.0.1",
         "@ngx-translate/http-loader": "^4.0.0",
         "@tinymce/tinymce-angular": "^3.0.0",
-        "core-js": "^2.6.5",
+        "core-js": "^3.0.1",
         "css-element-queries": "^1.1.1",
-        "exceljs": "1.9.0",
+        "exceljs": "1.9.1",
         "file-saver": "^2.0.1",
         "hammerjs": "^2.0.8",
         "material-icon-font": "git+https://github.com/petergng/materialIconFont.git",
         "ng-pick-datetime": "^7.0.0",
-        "ngx-file-drop": "^5.0.5",
+        "ngx-file-drop": "^6.0.0",
-        "ngx-mat-select-search": "^1.5.2",
+        "ngx-mat-select-search": "^1.7.2",
         "ngx-papaparse": "^3.0.2",
         "pdfmake": "^0.1.53",
         "po2json": "^1.0.0-alpha",
-        "rxjs": "^6.4.0",
+        "rxjs": "^6.5.1",
         "tinymce": "^4.9.2",
         "uuid": "^3.3.2",
-        "zone.js": "^0.8.29"
+        "zone.js": "^0.9.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^0.13.2",
+        "@angular-devkit/build-angular": "^0.13.8",
-        "@angular/cli": "^7.3.2",
+        "@angular/cli": "^7.3.8",
-        "@angular/compiler-cli": "^7.2.5",
+        "@angular/compiler-cli": "^7.2.14",
-        "@angular/language-service": "^7.2.5",
+        "@angular/language-service": "^7.2.14",
         "@biesbjerg/ngx-translate-extract": "^2.3.4",
         "@compodoc/compodoc": "^1.1.8",
         "@types/jasmine": "^3.3.9",
         "@types/jasminewd2": "^2.0.6",
-        "@types/node": "^11.9.4",
+        "@types/node": "^11.13.7",
-        "@types/yargs": "^12.0.9",
+        "@types/yargs": "^13.0.0",
-        "codelyzer": "~4.5.0",
+        "codelyzer": "~5.0.0",
         "fs": "0.0.1-security",
         "husky": "^1.3.1",
-        "jasmine-core": "~3.3.0",
+        "jasmine-core": "~3.4.0",
         "jasmine-spec-reporter": "~4.2.1",
-        "karma": "^4.0.0",
+        "karma": "^4.1.0",
         "karma-chrome-launcher": "~2.2.0",
         "karma-coverage-istanbul-reporter": "^2.0.5",
         "karma-jasmine": "~2.0.1",
@@ -85,11 +85,10 @@
         "prettier": "^1.17.0",
         "protractor": "^5.4.2",
         "source-map-explorer": "^1.7.0",
-        "terser": "3.16.1",
+        "ts-node": "~8.1.0",
-        "ts-node": "~8.0.2",
+        "tslint": "~5.16.0",
-        "tslint": "~5.12.1",
+        "tsutils": "3.10.0",
-        "tsutils": "3.8.0",
         "typescript": "~3.2.0",
-        "webpack-bundle-analyzer": "^3.0.4"
+        "webpack-bundle-analyzer": "^3.3.2"
     }
 }

client/src/app/shared/components/media-upload-content/media-upload-content.component.html

@@ -2,8 +2,13 @@
     <input hidden type="file" #fileInput (change)="onSelectFile($event)" multiple />
 
     <div class="selection-area">
-        <file-drop (onFileDrop)="onDropFile($event)" (click)="fileInput.click()" customstyle="file-drop-style">
+        <file-drop
-            <span translate>Drop files into this area OR click here to select files</span>
+            (onFileDrop)="onDropFile($event)"
+            (click)="fileInput.click()"
+            dropZoneLabel="{{ 'Drop files into this area OR click here to select files' | translate }}"
+            contentClassName="file-drop-content-style"
+            dropZoneClassName="file-drop-zone-style"
+        >
         </file-drop>
     </div>
 

client/src/app/site/assignments/assignments-routing.module.ts

@@ -6,8 +6,8 @@ import { AssignmentListComponent } from './components/assignment-list/assignment
 
 const routes: Routes = [
     { path: '', component: AssignmentListComponent, pathMatch: 'full' },
-    { path: 'new', component: AssignmentDetailComponent },
+    { path: 'new', component: AssignmentDetailComponent, data: { basePerm: 'assignments.can_manage' } },
-    { path: ':id', component: AssignmentDetailComponent }
+    { path: ':id', component: AssignmentDetailComponent, data: { basePerm: 'assignments.can_see' } }
 ];
 
 @NgModule({

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html

@@ -132,27 +132,29 @@
 </div>
 
 <ng-template #mobileView>
-    <!-- Meta info -->
+    <div *ngIf="motion">
-    <div class="hspacing"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
+        <!-- Meta info -->
+        <div class="hspacing"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
 
-    <mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
+        <mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
 
-    <!-- Content -->
+        <!-- Content -->
-    <div class="hspacing" [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card-mobile'">
+        <div class="hspacing" [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card-mobile'">
-        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+            <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+        </div>
+
+        <mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
+
+        <!-- Comments -->
+        <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>
+
+        <!-- Personal note -->
+        <os-personal-note *ngIf="!editMotion && !operator.isAnonymous" [motion]="motion"></os-personal-note>
     </div>
-
-    <mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
-
-    <!-- Comments -->
-    <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>
-
-    <!-- Personal note -->
-    <os-personal-note *ngIf="!editMotion && !operator.isAnonymous" [motion]="motion"></os-personal-note>
 </ng-template>
 
 <ng-template #desktopView>
-    <div class="desktop-view">
+    <div class="desktop-view" *ngIf="motion">
         <div class="desktop-left on-transition-fade">
             <!-- Meta Info -->
             <div class="meta-info-block meta-info-desktop">
@@ -172,7 +174,7 @@
 </ng-template>
 
 <ng-template #metaInfoTemplate>
-    <div *ngIf="motion">
+    <div>
         <!-- Submitters -->
         <div *ngIf="motion.submitters || newMotion">
             <div *ngIf="!editMotion"><os-manage-submitters [motion]="motion"></os-manage-submitters></div>
@@ -441,7 +443,7 @@
 </ng-template>
 
 <ng-template #contentTemplate>
-    <form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)" *ngIf="motion">
+    <form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)">
         <!-- Line Number and Diff buttons -->
         <div *ngIf="!editMotion && !motion.isStatuteAmendment()" class="motion-text-controls">
             <mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened">

client/src/styles.scss

@@ -338,11 +338,18 @@ mat-expansion-panel {
     display: none;
 }
 
-// ngx-file-drop requires the custom style in the global css file
+.file-drop-zone-style {
-.file-drop-style {
+    border: 2px dotted #0782d0 !important;
-    margin: auto;
     height: 100px;
-    border: 2px dotted #0782d0;
+}
+
+.file-drop-content-style {
+    height: 100px;
+
+    .ngx-file-drop__drop-zone-label {
+        color: #0782d0;
+        line-height: 100px;
+    }
 }
 
 .os-tree {

client/tsconfig.json

@@ -12,7 +12,9 @@
         "typeRoots": ["node_modules/@types"],
         "lib": ["es2017", "dom"],
         "paths": {
-            "exceljs": ["../node_modules/exceljs/dist/exceljs.min"]
+            "exceljs": ["../node_modules/exceljs/dist/exceljs.min"],
+            "core-js/es7/*": ["../node_modules/core-js/proposals/reflect-metadata"],
+            "core-js/es6/*": ["../node_modules/core-js/es/*"]
         }
     }
 }

client/tslint.json

@@ -46,12 +46,12 @@
         "variable-name": false,
         "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
         "no-output-on-prefix": true,
-        "use-input-property-decorator": true,
+        "no-inputs-metadata-property": true,
-        "use-output-property-decorator": true,
+        "no-outputs-metadata-property": true,
-        "use-host-property-decorator": 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