Merge pull request #5234 from tsiegleauq/angular9

Migrate to angular 9

.travis.yml

@@ -25,7 +25,7 @@ matrix:
 
     - name: "Installing npm dependencies"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       cache:
         - directories:
             - "client/node_modules"
@@ -39,7 +39,7 @@ matrix:
     - stage: "Run tests"
       name: "Client: Testing"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       apt:
         sources:
           - google-chrome
@@ -56,7 +56,7 @@ matrix:
 
     - name: "Client: Production Build (ES5)"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       install:
         - cd client
         - sed -i '/\"target\"/c\\"target\":\"es5\",' tsconfig.json
@@ -65,7 +65,7 @@ matrix:
 
     - name: "Client: Production Build (ES2015)"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       install:
         - cd client
         - echo "Firefox ESR" > browserslist
@@ -74,7 +74,7 @@ matrix:
 
     - name: "Client: Build"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       script:
         - cd client
         - npm run build-debug
@@ -111,14 +111,14 @@ matrix:
 
     - name: "Client: Linting"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       script:
         - cd client
         - npm run lint-check
 
     - name: "Client: Code Formatting Check"
       language: node_js
-      node_js: "10.9"
+      node_js: "10.13"
       script:
         - cd client
         - npm list --depth=0 || cat --help

client/README.md

@@ -59,76 +59,73 @@ Language files can be found in `/src/assets/i18n`.
 
 OpenSlides uses the following software or parts of them:
 
-- [@angular/animations@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/animations@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/cdk-experimental@8.1.4](https://github.com/angular/components), License: MIT
+-   [@angular/cdk-experimental@9.2.0](https://github.com/angular/components), License: MIT
-- [@angular/cdk@8.1.4](https://github.com/angular/components), License: MIT
+-   [@angular/cdk@9.2.0](https://github.com/angular/components), License: MIT
-- [@angular/common@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/common@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/compiler@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/compiler@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/core@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/core@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/forms@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/forms@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/material-moment-adapter@8.1.4](https://github.com/angular/components), License: MIT
+-   [@angular/material-moment-adapter@9.2.0](https://github.com/angular/components), License: MIT
-- [@angular/material@8.1.4](https://github.com/angular/components), License: MIT
+-   [@angular/material@9.2.0](https://github.com/angular/components), License: MIT
-- [@angular/platform-browser-dynamic@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/platform-browser-dynamic@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/platform-browser@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/platform-browser@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/pwa@0.803.2](https://github.com/angular/angular-cli), License: MIT
+-   [@angular/router@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/router@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/service-worker@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/service-worker@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@ngx-pwa/local-storage@9.0.3](https://github.com/cyrilletuzi/angular-async-local-storage), License: MIT
-- [@ngx-pwa/local-storage@8.2.1](https://github.com/cyrilletuzi/angular-async-local-storage), License: MIT
+-   [@ngx-translate/core@12.1.2](https://github.com/ngx-translate/core), License: MIT
-- [@ngx-translate/core@11.0.1](https://github.com/ngx-translate/core), License: MIT
 -   [@ngx-translate/http-loader@4.0.0](https://github.com/ngx-translate/http-loader), License: MIT
-- [@pebula/ngrid-material@1.0.0-rc.5](https://github.com/shlomiassaf/ngrid), License: MIT
+-   [@pebula/ngrid-material@2.0.0-rc.1](undefined), License: MIT
-- [@pebula/ngrid@1.0.0-rc.5](https://github.com/shlomiassaf/ngrid), License: MIT
+-   [@pebula/ngrid@2.0.0-rc.1](https://github.com/shlomiassaf/ngrid), License: MIT
-- [@pebula/utils@1.0.0](https://github.com/shlomiassaf/ngrid), License: MIT
+-   [@pebula/utils@1.0.2](undefined), License: MIT
-- [@tinymce/tinymce-angular@3.3.0](https://github.com/tinymce/tinymce-angular), License: Apache-2.0
+-   [@tinymce/tinymce-angular@3.5.0](https://github.com/tinymce/tinymce-angular), License: Apache-2.0
-- [acorn@7.0.0](https://github.com/acornjs/acorn), License: MIT
+-   [acorn@7.1.1](https://github.com/acornjs/acorn), License: MIT
-- [core-js@3.2.1](https://github.com/zloirock/core-js), License: MIT
+-   [chart.js@2.9.3](https://github.com/chartjs/Chart.js), License: MIT
-- [css-element-queries@1.2.1](https://github.com/marcj/css-element-queries), License: MIT
+-   [core-js@3.6.4](https://github.com/zloirock/core-js), License: MIT
-- [exceljs@1.15.0](https://github.com/exceljs/exceljs), License: MIT
+-   [css-element-queries@1.2.3](https://github.com/marcj/css-element-queries), License: MIT
+-   [exceljs@3.8.2](https://github.com/exceljs/exceljs), License: MIT
 -   [file-saver@2.0.2](https://github.com/eligrey/FileSaver.js), License: MIT
-- [hammerjs@2.0.8](https://github.com/hammerjs/hammer.js), License: MIT
 -   [lz4js@0.2.0](https://github.com/Benzinga/lz4js), License: ISC
 -   [material-icon-font@0.1.0](https://github.com//petergng/svgFontCreator), License: ISC
 -   [moment@2.24.0](https://github.com/moment/moment), License: MIT
-- [ng2-pdf-viewer@5.3.4](git+https://vadimdez@github.com/VadimDez/ng2-pdf-viewer), License: MIT
+-   [ng2-charts@2.3.0](https://github.com/valor-software/ng2-charts), License: ISC
-- [ngx-file-drop@8.0.7](https://github.com/georgipeltekov/ngx-file-drop), License: MIT
+-   [ng2-pdf-viewer@6.1.2](git+https://vadimdez@github.com/VadimDez/ng2-pdf-viewer), License: MIT
-- [ngx-mat-select-search@1.8.0](https://github.com/bithost-gmbh/ngx-mat-select-search), License: MIT
+-   [ngx-file-drop@8.0.8](https://github.com/georgipeltekov/ngx-file-drop), License: MIT
-- [ngx-material-timepicker@4.0.2](https://github.com/Agranom/ngx-material-timepicker), License: MIT
+-   [ngx-mat-select-search@2.1.2](https://github.com/bithost-gmbh/ngx-mat-select-search), License: MIT
-- [ngx-papaparse@4.0.2](https://github.com/alberthaff/ngx-papaparse), License: MIT
+-   [ngx-material-timepicker@5.5.1](https://github.com/Agranom/ngx-material-timepicker), License: MIT
-- [pdfmake@0.1.58](https://github.com/bpampuch/pdfmake), License: MIT
+-   [ngx-papaparse@4.0.4](https://github.com/alberthaff/ngx-papaparse), License: MIT
-- [po2json@1.0.0-alpha](https://github.com/mikeedwards/po2json), License: GNU Library General Public License
+-   [pdfmake@0.1.65](https://github.com/bpampuch/pdfmake), License: MIT
-- [rxjs@6.5.2](https://github.com/reactivex/rxjs), License: Apache-2.0
+-   [po2json@1.0.0-beta-2](https://github.com/mikeedwards/po2json), License: LGPL-2.0-or-later
-- [text-encoding@0.7.0](https://github.com/inexorabletash/text-encoding), License: (Unlicense OR Apache-2.0)
+-   [rxjs@6.5.4](https://github.com/reactivex/rxjs), License: Apache-2.0
-- [tinymce@5.0.14](https://github.com/tinymce/tinymce-dist), License: LGPL-2.1
+-   [tinymce@5.2.1](https://github.com/tinymce/tinymce-dist), License: LGPL-2.1
-- [tslib@1.10.0](https://github.com/Microsoft/tslib), License: Apache-2.0
+-   [tslib@1.11.1](https://github.com/Microsoft/tslib), License: Apache-2.0
-- [uuid@3.3.3](https://github.com/kelektiv/node-uuid), License: MIT
+-   [zone.js@0.10.3](https://github.com/angular/angular), License: MIT
-- [zone.js@0.9.1](https://github.com/angular/zone.js), License: MIT
+-   [@angular-devkit/build-angular@0.901.0](https://github.com/angular/angular-cli), License: MIT
-- [@angular-devkit/build-angular@0.803.2](https://github.com/angular/angular-cli), License: MIT
+-   [@angular-devkit/schematics@9.1.0](https://github.com/angular/angular-cli), License: MIT
-- [@angular/cli@8.3.2](https://github.com/angular/angular-cli), License: MIT
+-   [@angular/cli@9.1.0](https://github.com/angular/angular-cli), License: MIT
-- [@angular/compiler-cli@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/compiler-cli@9.1.0](https://github.com/angular/angular), License: MIT
-- [@angular/language-service@8.2.4](https://github.com/angular/angular), License: MIT
+-   [@angular/language-service@9.1.0](https://github.com/angular/angular), License: MIT
-- [@biesbjerg/ngx-translate-extract@3.0.5](https://github.com/biesbjerg/ngx-translate-extract), License: MIT
+-   [@biesbjerg/ngx-translate-extract@6.0.3](https://github.com/biesbjerg/ngx-translate-extract), License: MIT
-- [@compodoc/compodoc@1.1.10](https://github.com/compodoc/compodoc), License: MIT
+-   [@compodoc/compodoc@1.1.11](https://github.com/compodoc/compodoc), License: MIT
-- [@types/jasmine@3.4.0](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@schematics/angular@9.1.0](https://github.com/angular/angular-cli), License: MIT
-- [@types/jasminewd2@2.0.6](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@types/jasmine@3.5.10](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
-- [@types/node@12.7.3](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@types/jasminewd2@2.0.8](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
-- [@types/yargs@13.0.2](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@types/node@13.9.8](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
-- [codelyzer@5.1.0](https://github.com/mgechev/codelyzer), License: MIT
+-   [@types/yargs@15.0.4](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
-- [husky@3.0.4](https://github.com/typicode/husky), License: MIT
+-   [codelyzer@5.2.2](https://github.com/mgechev/codelyzer), License: MIT
-- [jasmine-core@3.4.0](https://github.com/jasmine/jasmine), License: MIT
+-   [husky@4.2.3](https://github.com/typicode/husky), License: MIT
-- [jasmine-spec-reporter@4.2.1](https://github.com/bcaudan/jasmine-spec-reporter), License: Apache-2.0
+-   [jasmine-core@3.5.0](https://github.com/jasmine/jasmine), License: MIT
+-   [jasmine-spec-reporter@5.0.1](https://github.com/bcaudan/jasmine-spec-reporter), License: Apache-2.0
 -   [karma-chrome-launcher@3.1.0](https://github.com/karma-runner/karma-chrome-launcher), License: MIT
-- [karma-coverage-istanbul-reporter@2.1.0](https://github.com/mattlewis92/karma-coverage-istanbul-reporter), License: MIT
+-   [karma-coverage-istanbul-reporter@2.1.1](https://github.com/mattlewis92/karma-coverage-istanbul-reporter), License: MIT
-- [karma-jasmine-html-reporter@1.4.2](https://github.com/dfederm/karma-jasmine-html-reporter), License: MIT
+-   [karma-jasmine-html-reporter@1.5.3](https://github.com/dfederm/karma-jasmine-html-reporter), License: MIT
-- [karma-jasmine@2.0.1](https://github.com/karma-runner/karma-jasmine), License: MIT
+-   [karma-jasmine@3.1.1](https://github.com/karma-runner/karma-jasmine), License: MIT
-- [karma@4.3.0](https://github.com/karma-runner/karma), License: MIT
+-   [karma@4.4.1](https://github.com/karma-runner/karma), License: MIT
 -   [npm-license-crawler@0.2.1](https://github.com/mwittig/npm-license-crawler), License: BSD-3-Clause
-- [npm-run-all@4.1.5](https://github.com/mysticatea/npm-run-all), License: MIT
+-   [prettier@2.0.2](https://github.com/prettier/prettier), License: MIT
-- [prettier@1.18.2](https://github.com/prettier/prettier), License: MIT
+-   [protractor@5.4.3](https://github.com/angular/protractor), License: MIT
-- [protractor@5.4.2](https://github.com/angular/protractor), License: MIT
 -   [resize-observer-polyfill@1.5.1](https://github.com/que-etc/resize-observer-polyfill), License: MIT
-- [source-map-explorer@2.0.1](https://github.com/danvk/source-map-explorer), License: Apache-2.0
+-   [ts-node@8.8.1](https://github.com/TypeStrong/ts-node), License: MIT
-- [ts-node@8.3.0](https://github.com/TypeStrong/ts-node), License: MIT
+-   [tslint@6.1.0](https://github.com/palantir/tslint), License: Apache-2.0
-- [tslint@5.19.0](https://github.com/palantir/tslint), License: Apache-2.0
 -   [tsutils@3.17.1](https://github.com/ajafff/tsutils), License: MIT
-- [typescript@3.5.3](https://github.com/Microsoft/TypeScript), License: Apache-2.0
+-   [typescript@3.8.3](https://github.com/Microsoft/TypeScript), License: Apache-2.0
-- [webpack-bundle-analyzer@3.4.1](https://github.com/webpack-contrib/webpack-bundle-analyzer), License: MIT

client/angular.json

@@ -7,7 +7,7 @@
             "projectType": "application",
             "schematics": {
                 "@schematics/angular:component": {
-                    "styleext": "scss"
+                    "style": "scss"
                 }
             },
             "root": "",
@@ -22,7 +22,7 @@
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.app.json",
-                        "aot": false,
+                        "aot": true,
                         "assets": [
                             "src/assets",
                             "src/manifest.json",
@@ -48,10 +48,12 @@
                     },
                     "configurations": {
                         "production": {
-                            "fileReplacements": [{
+                            "fileReplacements": [
+                                {
                                     "replace": "src/environments/environment.ts",
                                     "with": "src/environments/environment.prod.ts"
-                            }],
+                                }
+                            ],
                             "optimization": true,
                             "outputHashing": "all",
                             "sourceMap": false,
@@ -62,13 +64,25 @@
                             "vendorChunk": false,
                             "buildOptimizer": true,
                             "serviceWorker": true,
-                            "budgets": [{
+                            "budgets": [
+                                {
                                     "type": "initial",
                                     "maximumWarning": "5mb",
                                     "maximumError": "10mb"
-                            }]
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ]
                         },
                         "es5": {
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
                             "tsConfig": "./tsconfig-es5.app.json"
                         }
                     }

client/package.json

@@ -10,11 +10,11 @@
     "README": "https://github.com/OpenSlides/OpenSlides/blob/master/client/README.md",
     "scripts": {
         "ng": "ng",
-        "ng-high-memory": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng",
         "start": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0",
         "start-es5": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0 --configuration es5",
-        "build": "npm run ng-high-memory -- build --prod",
+        "build": "ng build --prod",
-        "build-debug": "npm run ng-high-memory -- build",
+        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
+        "build-debug": "ng build",
         "test": "ng test",
         "test-silently": "npm run test -- --watch=false --no-progress --browsers=ChromeHeadlessNoSandbox",
         "lint-check": "ng lint",
@@ -31,82 +31,77 @@
         "cleanup-win": "npm run prettify-write & npm run lint-write"
     },
     "dependencies": {
-        "@angular/animations": "^8.2.14",
+        "@angular/animations": "~9.1.0",
-        "@angular/cdk": "~8.1.4",
+        "@angular/cdk": "~9.2.0",
-        "@angular/cdk-experimental": "~8.1.4",
+        "@angular/cdk-experimental": "~9.2.0",
-        "@angular/common": "^8.2.14",
+        "@angular/common": "~9.1.0",
-        "@angular/compiler": "^8.2.14",
+        "@angular/compiler": "~9.1.0",
-        "@angular/core": "^8.2.14",
+        "@angular/core": "~9.1.0",
-        "@angular/forms": "^8.2.14",
+        "@angular/forms": "~9.1.0",
-        "@angular/material": "~8.1.4",
+        "@angular/material": "~9.2.0",
-        "@angular/material-moment-adapter": "~8.1.4",
+        "@angular/material-moment-adapter": "~9.2.0",
-        "@angular/platform-browser": "^8.2.14",
+        "@angular/platform-browser": "~9.1.0",
-        "@angular/platform-browser-dynamic": "^8.2.14",
+        "@angular/platform-browser-dynamic": "~9.1.0",
-        "@angular/pwa": "^0.803.23",
+        "@angular/router": "~9.1.0",
-        "@angular/router": "^8.2.14",
+        "@angular/service-worker": "~9.1.0",
-        "@angular/service-worker": "^8.2.14",
+        "@ngx-pwa/local-storage": "~9.0.2",
-        "@ngx-pwa/local-storage": "^8.2.4",
+        "@ngx-translate/core": "~12.1.2",
-        "@ngx-translate/core": "~11.0.1",
         "@ngx-translate/http-loader": "^4.0.0",
-        "@pebula/ngrid": "1.0.0-rc.16",
+        "@pebula/ngrid": "2.0.0-rc.1",
-        "@pebula/ngrid-material": "1.0.0-rc.16",
+        "@pebula/ngrid-material": "2.0.0-rc.1",
         "@pebula/utils": "1.0.2",
         "@tinymce/tinymce-angular": "^3.3.1",
         "acorn": "^7.1.0",
         "chart.js": "^2.9.2",
         "core-js": "^3.6.4",
         "css-element-queries": "^1.2.3",
-        "exceljs": "1.15.0",
+        "exceljs": "3.8.2",
         "file-saver": "^2.0.2",
-        "hammerjs": "^2.0.8",
         "lz4js": "^0.2.0",
         "material-icon-font": "git+https://github.com/petergng/materialIconFont.git",
         "moment": "^2.24.0",
         "ng2-charts": "^2.3.0",
-        "ng2-pdf-viewer": "^5.3.4",
         "ngx-file-drop": "^8.0.8",
-        "ngx-mat-select-search": "^1.8.0",
+        "ng2-pdf-viewer": "^6.1.2",
-        "ngx-material-timepicker": "^4.0.2",
+        "ngx-mat-select-search": "^2.1.2",
+        "ngx-material-timepicker": "^5.5.1",
         "ngx-papaparse": "^4.0.2",
         "pdfmake": "^0.1.63",
         "po2json": "^1.0.0-beta-2",
         "rxjs": "^6.5.4",
         "tinymce": "^5.1.5",
         "tslib": "^1.10.0",
-        "uuid": "^3.3.3",
+        "zone.js": "~0.10.2"
-        "zone.js": "~0.9.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^0.803.23",
+        "@angular-devkit/build-angular": "~0.900.7",
-        "@angular/cli": "^8.3.23",
+        "@angular-devkit/schematics": "^9.0.6",
-        "@angular/compiler-cli": "^8.2.14",
+        "@angular/cli": "~9.1.0",
-        "@angular/language-service": "^8.2.14",
+        "@angular/compiler-cli": "~9.1.0",
-        "@biesbjerg/ngx-translate-extract": "^3.0.5",
+        "@angular/language-service": "~9.1.0",
-        "@babel/compat-data": "~7.8.0",
+        "@biesbjerg/ngx-translate-extract": "^6.0.3",
-        "@compodoc/compodoc": "^1.1.11",
+        "@compodoc/compodoc": "^1.1.8",
-        "@types/jasmine": "^3.5.0",
+        "@schematics/angular": "^9.0.6",
-        "@types/jasminewd2": "^2.0.8",
+        "@types/jasmine": "^3.3.9",
-        "@types/node": "^12.7.12",
+        "@types/jasminewd2": "^2.0.6",
-        "@types/yargs": "^13.0.5",
+        "@types/node": "^13.9.8",
-        "codelyzer": "^5.2.1",
+        "@types/yargs": "^15.0.4",
-        "husky": "^3.1.0",
+        "codelyzer": "^5.1.2",
-        "jasmine-core": "~3.4.0",
+        "husky": "^4.2.3",
-        "jasmine-spec-reporter": "~4.2.1",
+        "jasmine-core": "~3.5.0",
+        "jasmine-spec-reporter": "~5.0.1",
         "karma": "^4.4.1",
         "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "^2.1.1",
+        "karma-coverage-istanbul-reporter": "^2.0.5",
-        "karma-jasmine": "~2.0.1",
+        "karma-jasmine": "~3.1.1",
-        "karma-jasmine-html-reporter": "^1.5.1",
+        "karma-jasmine-html-reporter": "^1.4.0",
         "npm-license-crawler": "^0.2.1",
-        "npm-run-all": "^4.1.5",
+        "prettier": "^2.0.2",
-        "prettier": "^1.19.1",
+        "protractor": "^5.4.3",
-        "protractor": "^5.4.2",
         "resize-observer-polyfill": "^1.5.1",
-        "source-map-explorer": "^2.2.2",
+        "ts-node": "~8.8.1",
-        "ts-node": "~8.3.0",
+        "tslint": "~6.1.0",
-        "tslint": "~5.19.0",
         "tsutils": "3.17.1",
-        "typescript": "~3.5.3",
+        "typescript": "~3.8.3"
-        "webpack-bundle-analyzer": "^3.6.0"
     }
 }

client/src/app/app.component.spec.ts

@@ -14,8 +14,8 @@ describe('AppComponent', () => {
             imports: [E2EImportsModule]
         }).compileComponents();
 
-        servertimeService = TestBed.get(ServertimeService);
+        servertimeService = TestBed.inject(ServertimeService);
-        translate = TestBed.get(TranslateService);
+        translate = TestBed.inject(TranslateService);
         spyOn(servertimeService, 'startScheduler').and.stub();
         spyOn(translate, 'addLangs').and.stub();
         spyOn(translate, 'setDefaultLang').and.stub();

client/src/app/app.component.ts

@@ -116,7 +116,7 @@ export class AppComponent {
 
     private overloadArrayFunctions(): void {
         Object.defineProperty(Array.prototype, 'toString', {
-            value: function(): string {
+            value: function (): string {
                 let string = '';
                 const iterations = Math.min(this.length, 3);
 
@@ -137,7 +137,7 @@ export class AppComponent {
         });
 
         Object.defineProperty(Array.prototype, 'flatMap', {
-            value: function(o: any): any[] {
+            value: function (o: any): any[] {
                 const concatFunction = (x: any, y: any[]) => x.concat(y);
                 const flatMapLogic = (f: any, xs: any) => xs.map(f).reduce(concatFunction, []);
                 return flatMapLogic(o, this);
@@ -146,7 +146,7 @@ export class AppComponent {
         });
 
         Object.defineProperty(Array.prototype, 'intersect', {
-            value: function<T>(other: T[]): T[] {
+            value: function <T>(other: T[]): T[] {
                 let a = this;
                 let b = other;
                 // indexOf to loop over shorter
@@ -159,7 +159,7 @@ export class AppComponent {
         });
 
         Object.defineProperty(Array.prototype, 'mapToObject', {
-            value: function<T>(f: (item: T) => { [key: string]: any }): { [key: string]: any } {
+            value: function <T>(f: (item: T) => { [key: string]: any }): { [key: string]: any } {
                 return this.reduce((aggr, item) => {
                     const res = f(item);
                     for (const key in res) {
@@ -179,7 +179,7 @@ export class AppComponent {
      */
     private overloadSetFunctions(): void {
         Object.defineProperty(Set.prototype, 'equals', {
-            value: function<T>(other: Set<T>): boolean {
+            value: function <T>(other: Set<T>): boolean {
                 const difference = new Set(this);
                 for (const elem of other) {
                     if (difference.has(elem)) {
@@ -200,7 +200,7 @@ export class AppComponent {
      */
     private overloadModulo(): void {
         Object.defineProperty(Number.prototype, 'modulo', {
-            value: function(n: number): number {
+            value: function (n: number): number {
                 return ((this % n) + n) % n;
             },
             enumerable: false

client/src/app/app.module.ts

@@ -4,6 +4,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
+import { StorageModule } from '@ngx-pwa/local-storage';
+
 import { AppLoadService } from './core/core-services/app-load.service';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -39,7 +41,8 @@ export function AppLoaderFactory(appLoadService: AppLoadService): () => Promise<
         CoreModule,
         LoginModule,
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
-        SlidesModule.forRoot()
+        SlidesModule.forRoot(),
+        StorageModule.forRoot({ IDBNoWrap: false })
     ],
     providers: [{ provide: APP_INITIALIZER, useFactory: AppLoaderFactory, deps: [AppLoadService], multi: true }],
     bootstrap: [AppComponent]

client/src/app/core/core-services/autoupdate.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { BaseModel } from '../../shared/models/base/base-model';
 import { CollectionStringMapperService } from './collection-string-mapper.service';
 import { DataStoreService, DataStoreUpdateManagerService } from './data-store.service';
-import { WEBSOCKET_ERROR_CODES, WebsocketService } from './websocket.service';
+import { WebsocketService, WEBSOCKET_ERROR_CODES } from './websocket.service';
 
 interface AutoupdateFormat {
     /**

client/src/app/core/core-services/http.service.spec.ts

@@ -10,7 +10,7 @@ describe('HttpService', () => {
     });
     // TODO: Write a working Test
     // it('should be created', () => {
-    //     const service: HttpService = TestBed.get(HttpService);
+    //     const service: HttpService = TestBed.inject(HttpService);
     //     expect(service).toBeTruthy();
     // });
 });

client/src/app/core/core-services/time-travel.service.spec.ts

@@ -13,7 +13,7 @@ describe('TimeTravelService', () => {
     );
 
     it('should be created', () => {
-        const service: TimeTravelService = TestBed.get(TimeTravelService);
+        const service: TimeTravelService = TestBed.inject(TimeTravelService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/core-services/websocket.service.ts

@@ -208,9 +208,7 @@ export class WebsocketService {
      * Uses NgZone to let all callbacks run in the angular context.
      */
     public async connect(options: ConnectOptions = {}, retry: boolean = false): Promise<void> {
-        const websocketId = Math.random()
+        const websocketId = Math.random().toString(36).substring(7);
-            .toString(36)
-            .substring(7);
         this.websocketId = websocketId;
 
         if (this.websocket) {
@@ -316,8 +314,9 @@ export class WebsocketService {
             const compressedSize = data.byteLength;
             const decompressedBuffer: Uint8Array = decompress(new Uint8Array(data));
             console.debug(
-                `Recieved ${compressedSize / 1024} KB (${decompressedBuffer.byteLength /
+                `Recieved ${compressedSize / 1024} KB (${
-                    1024} KB uncompressed), ratio ${decompressedBuffer.byteLength / compressedSize}`
+                    decompressedBuffer.byteLength / 1024
+                } KB uncompressed), ratio ${decompressedBuffer.byteLength / compressedSize}`
             );
             data = this.arrayBufferToString(decompressedBuffer);
         }

client/src/app/core/core.module.ts

@@ -2,11 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule, Optional, SkipSelf, Type } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
-import { ProjectionDialogComponent } from 'app/shared/components/projection-dialog/projection-dialog.component';
-import { ChoiceDialogComponent } from '../shared/components/choice-dialog/choice-dialog.component';
 import { OnAfterAppsLoaded } from './definitions/on-after-apps-loaded';
 import { OperatorService } from './core-services/operator.service';
-import { PromptDialogComponent } from '../shared/components/prompt-dialog/prompt-dialog.component';
 
 export const ServicesToLoadOnAppsLoaded: Type<OnAfterAppsLoaded>[] = [OperatorService];
 
@@ -15,8 +12,7 @@ export const ServicesToLoadOnAppsLoaded: Type<OnAfterAppsLoaded>[] = [OperatorSe
  */
 @NgModule({
     imports: [CommonModule],
-    providers: [Title],
+    providers: [Title]
-    entryComponents: [PromptDialogComponent, ChoiceDialogComponent, ProjectionDialogComponent]
 })
 export class CoreModule {
     /** make sure CoreModule is imported only by one NgModule, the AppModule */

client/src/app/core/pdf-services/html-to-pdf.service.ts

@@ -618,10 +618,7 @@ export class HtmlToPdfService {
         const styleObject: any = {};
         if (styles && styles.length > 0) {
             for (const style of styles) {
-                const styleDefinition = style
+                const styleDefinition = style.trim().toLowerCase().split(':');
-                    .trim()
-                    .toLowerCase()
-                    .split(':');
                 const key = styleDefinition[0];
                 const value = styleDefinition[1];
 

client/src/app/core/pdf-services/pdf-document.service.ts

@@ -1,6 +1,6 @@
 import { HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 import { saveAs } from 'file-saver';

client/src/app/core/repositories/assignments/assignment-option-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('AssignmentOptionRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: AssignmentOptionRepositoryService = TestBed.get(AssignmentOptionRepositoryService);
+        const service: AssignmentOptionRepositoryService = TestBed.inject(AssignmentOptionRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/assignments/assignment-poll-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('AssignmentPollRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: AssignmentPollRepositoryService = TestBed.get(AssignmentPollRepositoryService);
+        const service: AssignmentPollRepositoryService = TestBed.inject(AssignmentPollRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/assignments/assignment-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('AssignmentRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: AssignmentRepositoryService = TestBed.get(AssignmentRepositoryService);
+        const service: AssignmentRepositoryService = TestBed.inject(AssignmentRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/assignments/assignment-vote-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('AssignmentVoteRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: AssignmentVoteRepositoryService = TestBed.get(AssignmentVoteRepositoryService);
+        const service: AssignmentVoteRepositoryService = TestBed.inject(AssignmentVoteRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/mediafiles/mediafile-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('FileRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: MediafileRepositoryService = TestBed.get(MediafileRepositoryService);
+        const service: MediafileRepositoryService = TestBed.inject(MediafileRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/motions/motion-block-repository.service.spec.ts

@@ -12,7 +12,7 @@ describe('MotionBlockRepositoryService', () => {
     );
 
     it('should be created', () => {
-        const service: MotionBlockRepositoryService = TestBed.get(MotionBlockRepositoryService);
+        const service: MotionBlockRepositoryService = TestBed.inject(MotionBlockRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/motions/motion-option-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('MotionOptionRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: MotionOptionRepositoryService = TestBed.get(MotionOptionRepositoryService);
+        const service: MotionOptionRepositoryService = TestBed.inject(MotionOptionRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/motions/motion-poll-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('MotionPollRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: MotionPollRepositoryService = TestBed.get(MotionPollRepositoryService);
+        const service: MotionPollRepositoryService = TestBed.inject(MotionPollRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/motions/motion-vote-repository.service.spec.ts

@@ -8,7 +8,7 @@ describe('MotionVoteRepositoryService', () => {
     beforeEach(() => TestBed.configureTestingModule({ imports: [E2EImportsModule] }));
 
     it('should be created', () => {
-        const service: MotionVoteRepositoryService = TestBed.get(MotionVoteRepositoryService);
+        const service: MotionVoteRepositoryService = TestBed.inject(MotionVoteRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/tags/tag-repository.service.spec.ts

@@ -12,7 +12,7 @@ describe('TagRepositoryService', () => {
     });
 
     it('should be created', () => {
-        const service = TestBed.get(TagRepositoryService);
+        const service = TestBed.inject(TagRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/repositories/topics/topic-repository.service.spec.ts

@@ -11,7 +11,7 @@ describe('TopicRepositoryService', () => {
     );
 
     it('should be created', () => {
-        const service: TopicRepositoryService = TestBed.get(TopicRepositoryService);
+        const service: TopicRepositoryService = TestBed.inject(TopicRepositoryService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/translate/openslides-translate-module.ts

@@ -29,7 +29,7 @@ import { OpenSlidesTranslateService } from './translation-service';
     exports: [TranslatePipe, TranslateDirective]
 })
 export class OpenSlidesTranslateModule {
-    public static forRoot(): ModuleWithProviders {
+    public static forRoot(): ModuleWithProviders<TranslateModule> {
         return {
             ngModule: TranslateModule,
             providers: [
@@ -46,7 +46,7 @@ export class OpenSlidesTranslateModule {
     }
 
     // no config store for child.
-    public static forChild(): ModuleWithProviders {
+    public static forChild(): ModuleWithProviders<TranslateModule> {
         return {
             ngModule: TranslateModule,
             providers: [

client/src/app/core/translate/translation-service.ts

@@ -39,7 +39,7 @@ export class OpenSlidesTranslateService extends TranslateService {
         @Inject(USE_DEFAULT_LANG) useDefaultLang: boolean = true,
         @Inject(USE_STORE) isolate: boolean = false
     ) {
-        super(store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate);
+        super(store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate, true, 'en');
     }
 
     /**

client/src/app/core/ui-services/banner.service.spec.ts

@@ -6,7 +6,7 @@ describe('BannerService', () => {
     beforeEach(() => TestBed.configureTestingModule({}));
 
     it('should be created', () => {
-        const service: BannerService = TestBed.get(BannerService);
+        const service: BannerService = TestBed.inject(BannerService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/ui-services/base-poll-dialog.service.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from '@angular/cdk/portal';
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import { CollectionStringMapperService } from 'app/core/core-services/collection-string-mapper.service';
 import { Collection } from 'app/shared/models/base/collection';

client/src/app/core/ui-services/base-sort.service.spec.ts

@@ -13,7 +13,7 @@ describe('BaseSortService', () => {
 
     // TODO testing (does not work without injecting a BaseViewComponent)
     //   it('should be created', () => {
-    //     const service: BaseSortService = TestBed.get(BaseSortService);
+    //     const service: BaseSortService = TestBed.inject(BaseSortService);
     //     expect(service).toBeTruthy();
     //   });
 });

client/src/app/core/ui-services/choice.service.spec.ts

@@ -13,7 +13,7 @@ describe('ChoiceService', () => {
     });
 
     it('should be created', () => {
-        const service: ChoiceService = TestBed.get(ChoiceService);
+        const service: ChoiceService = TestBed.inject(ChoiceService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/ui-services/diff.service.ts

@@ -885,10 +885,7 @@ export class DiffService {
             }
         }
 
-        return str
+        return str.replace(/^\s+/g, '').replace(/\s+$/g, '').replace(/ {2,}/g, ' ');
-            .replace(/^\s+/g, '')
-            .replace(/\s+$/g, '')
-            .replace(/ {2,}/g, ' ');
     }
 
     /**
@@ -1000,14 +997,7 @@ export class DiffService {
                     classes = childElement.getAttribute('class').split(' ');
                 }
                 classes.push(className);
-                childElement.setAttribute(
+                childElement.setAttribute('class', classes.sort().join(' ').replace(/^\s+/, '').replace(/\s+$/, ''));
-                    'class',
-                    classes
-                        .sort()
-                        .join(' ')
-                        .replace(/^\s+/, '')
-                        .replace(/\s+$/, '')
-                );
                 foundLast = true;
             }
         }
@@ -1150,10 +1140,7 @@ export class DiffService {
         let html = this.serializeTag(node);
         for (let i = 0; i < node.childNodes.length; i++) {
             if (node.childNodes[i].nodeType === TEXT_NODE) {
-                html += node.childNodes[i].nodeValue
+                html += node.childNodes[i].nodeValue.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-                    .replace(/&/g, '&amp;')
-                    .replace(/</g, '&lt;')
-                    .replace(/>/g, '&gt;');
             } else if (
                 !stripLineNumbers ||
                 (!this.lineNumberingService.isOsLineNumberNode(node.childNodes[i]) &&
@@ -1867,10 +1854,7 @@ export class DiffService {
 
         // Performing the actual diff
         const str = this.diffString(workaroundPrepend + htmlOld, workaroundPrepend + htmlNew);
-        let diffUnnormalized = str
+        let diffUnnormalized = str.replace(/^\s+/g, '').replace(/\s+$/g, '').replace(/ {2,}/g, ' ');
-            .replace(/^\s+/g, '')
-            .replace(/\s+$/g, '')
-            .replace(/ {2,}/g, ' ');
 
         diffUnnormalized = this.fixWrongChangeDetection(diffUnnormalized);
 

client/src/app/core/ui-services/overlay.service.spec.ts

@@ -12,7 +12,7 @@ describe('OverlayService', () => {
     );
 
     it('should be created', () => {
-        const service: OverlayService = TestBed.get(OverlayService);
+        const service: OverlayService = TestBed.inject(OverlayService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/ui-services/overlay.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 import { Observable, Subject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';

client/src/app/core/ui-services/progress.service.spec.ts

@@ -6,7 +6,7 @@ describe('ProgressService', () => {
     beforeEach(() => TestBed.configureTestingModule({}));
 
     it('should be created', () => {
-        const service: ProgressService = TestBed.get(ProgressService);
+        const service: ProgressService = TestBed.inject(ProgressService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/ui-services/tree-sort.service.spec.ts

@@ -13,7 +13,7 @@ describe('TreeSortService', () => {
 
     // TODO testing (does not work without injecting a BaseViewComponent)
     //   it('should be created', () => {
-    //     const service: TreeSortService = TestBed.get(TreeSortService);
+    //     const service: TreeSortService = TestBed.inject(TreeSortService);
     //     expect(service).toBeTruthy();
     //   });
 });

client/src/app/core/ui-services/voting-banner.service.spec.ts

@@ -12,7 +12,7 @@ describe('VotingBannerService', () => {
     );
 
     it('should be created', () => {
-        const service: VotingBannerService = TestBed.get(VotingBannerService);
+        const service: VotingBannerService = TestBed.inject(VotingBannerService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/core/ui-services/voting.service.spec.ts

@@ -12,7 +12,7 @@ describe('VotingService', () => {
     );
 
     it('should be created', () => {
-        const service: VotingService = TestBed.get(VotingService);
+        const service: VotingService = TestBed.inject(VotingService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/shared/components/agenda-content-object-form/agenda-content-object-form.component.spec.ts

@@ -21,7 +21,7 @@ describe('AgendaContentObjectFormComponent', () => {
     });
 
     it('should create', () => {
-        const formBuilder: FormBuilder = TestBed.get(FormBuilder);
+        const formBuilder: FormBuilder = TestBed.inject(FormBuilder);
         component.form = formBuilder.group({
             agenda_create: [''],
             agenda_parent_id: [],

client/src/app/shared/components/attachment-control/attachment-control.component.ts

@@ -11,7 +11,8 @@ import {
     TemplateRef
 } from '@angular/core';
 import { FormBuilder, NgControl } from '@angular/forms';
-import { MatDialog, MatFormFieldControl } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatFormFieldControl } from '@angular/material/form-field';
 
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

client/src/app/shared/components/block-tile/block-tile.component.ts

@@ -34,19 +34,19 @@ export class BlockTileComponent extends TileComponent implements AfterViewInit {
     /**
      * Reference to the content of the content part.
      */
-    @ViewChild('contentNode', { static: false })
+    @ViewChild('contentNode')
     public contentNode: ElementRef<HTMLElement>;
 
     /**
      * Reference to the block part, if it is a node.
      */
-    @ViewChild('blockNode', { static: false })
+    @ViewChild('blockNode')
     public blockNode: ElementRef<HTMLElement>;
 
     /**
      * Reference to the action buttons in the content part, if used.
      */
-    @ViewChild('actionNode', { static: false })
+    @ViewChild('actionNode')
     public actionNode: ElementRef<HTMLElement>;
 
     /**

client/src/app/shared/components/charts/charts.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/shared/components/check-input/check-input.component.ts

@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/shared/components/choice-dialog/choice-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 

client/src/app/shared/components/choice-dialog/choice-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { Observable } from 'rxjs';
 

client/src/app/shared/components/copyright-sign/copyright-sign.component.ts

@@ -576,9 +576,7 @@ export class C4DialogComponent implements OnInit, OnDestroy {
 
 @Component({
     selector: 'os-copyright-sign',
-    template: `
+    template: ` <span (click)="launchC4($event)">©</span> `,
-        <span (click)="launchC4($event)">©</span>
-    `,
     styles: [``]
 })
 export class CopyrightSignComponent {

client/src/app/shared/components/legal-notice-content/legal-notice-content.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -93,7 +93,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
     /**
      * Declare the table
      */
-    @ViewChild(PblNgridComponent, { static: false })
+    @ViewChild(PblNgridComponent)
     private ngrid: PblNgridComponent;
 
     /**
@@ -531,11 +531,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             // filter by ID
             const trimmedInput = this.inputValue.trim().toLowerCase();
             const idString = '' + item.id;
-            const foundId =
+            const foundId = idString.trim().toLowerCase().indexOf(trimmedInput) !== -1;
-                idString
-                    .trim()
-                    .toLowerCase()
-                    .indexOf(trimmedInput) !== -1;
             if (foundId) {
                 return true;
             }
@@ -564,11 +560,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
                         }
 
                         if (propertyAsString) {
-                            const foundProp =
+                            const foundProp = propertyAsString.trim().toLowerCase().indexOf(trimmedInput) !== -1;
-                                propertyAsString
-                                    .trim()
-                                    .toLowerCase()
-                                    .indexOf(trimmedInput) !== -1;
 
                             if (foundProp) {
                                 return true;

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

@@ -64,7 +64,7 @@ export class MediaUploadContentComponent implements OnInit {
     /**
      * Hold the mat table to manually render new rows
      */
-    @ViewChild(MatTable, { static: false })
+    @ViewChild(MatTable)
     public table: MatTable<any>;
 
     /**

client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatSnackBarRef } from '@angular/material';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 

client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.ts

@@ -6,7 +6,7 @@ import {
     OnInit,
     ViewEncapsulation
 } from '@angular/core';
-import { MatSnackBarRef } from '@angular/material';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
 
 import { Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';

client/src/app/shared/components/projection-dialog/projection-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 

client/src/app/shared/components/projection-dialog/projection-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { DataStoreService } from 'app/core/core-services/data-store.service';
 import { ProjectorService } from 'app/core/core-services/projector.service';

client/src/app/shared/components/projector/projector.component.ts

@@ -171,11 +171,7 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
     ) {
         super(titleService, translate);
 
-        this.projectorClass =
+        this.projectorClass = 'projector-' + Math.random().toString(36).substring(4);
-            'projector-' +
-            Math.random()
-                .toString(36)
-                .substring(4);
         this.elementRef.nativeElement.classList.add(this.projectorClass);
         this.styleElement = document.createElement('style');
         this.styleElement.appendChild(document.createTextNode('')); // Hack for WebKit to trigger update

client/src/app/shared/components/prompt-dialog/prompt-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 

client/src/app/shared/components/prompt-dialog/prompt-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 interface PromptDialogData {
     title: string;

client/src/app/shared/components/search-value-selector/search-value-selector.component.spec.ts

@@ -42,7 +42,7 @@ describe('SearchValueSelectorComponent', () => {
         const subject: BehaviorSubject<Selectable[]> = new BehaviorSubject(subjectList);
         hostComponent.searchValueSelectorComponent.inputListValues = subject;
 
-        const formBuilder: FormBuilder = TestBed.get(FormBuilder);
+        const formBuilder: FormBuilder = TestBed.inject(FormBuilder);
         const formControl = formBuilder.control([]);
         hostComponent.searchValueSelectorComponent.contentForm = formControl;
 

client/src/app/shared/components/search-value-selector/search-value-selector.component.ts

@@ -10,7 +10,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { FormBuilder, FormControl, NgControl } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material';
+import { MatFormFieldControl } from '@angular/material/form-field';
 
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -139,22 +139,13 @@ export class SearchValueSelectorComponent extends BaseFormControlComponent<Selec
             const searchValue: string = this.searchValue.value.toLowerCase();
             return this.selectableItems.filter(item => {
                 const idString = '' + item.id;
-                const foundId =
+                const foundId = idString.trim().toLowerCase().indexOf(searchValue) !== -1;
-                    idString
-                        .trim()
-                        .toLowerCase()
-                        .indexOf(searchValue) !== -1;
 
                 if (foundId) {
                     return true;
                 }
 
-                return (
+                return item.toString().toLowerCase().indexOf(searchValue) > -1;
-                    item
-                        .toString()
-                        .toLowerCase()
-                        .indexOf(searchValue) > -1
-                );
             });
         }
     }

client/src/app/shared/components/slide-container/slide-container.component.ts

@@ -8,7 +8,7 @@ import { SlideData } from 'app/core/core-services/projector-data.service';
 import { ProjectorElement } from 'app/shared/models/core/projector';
 import { ViewProjector } from 'app/site/projector/models/view-projector';
 import { isBaseScaleScrollSlideComponent } from 'app/slides/base-scale-scroll-slide-component';
-import { BaseSlideComponent } from 'app/slides/base-slide-component';
+import { BaseSlideComponentDirective } from 'app/slides/base-slide-component';
 import { SlideManager } from 'app/slides/services/slide-manager.service';
 
 function hasError(obj: object): obj is { error: string } {
@@ -28,7 +28,7 @@ export class SlideContainerComponent extends BaseComponent {
 
     @ViewChild('slide', { read: ViewContainerRef, static: true })
     private slide: ViewContainerRef;
-    private slideRef: ComponentRef<BaseSlideComponent<object>>;
+    private slideRef: ComponentRef<BaseSlideComponentDirective<object>>;
 
     /**
      * A slide is autonomic, if it takes care of scaling and scrolling by itself.
@@ -152,7 +152,7 @@ export class SlideContainerComponent extends BaseComponent {
         if (this.slideOptions.scrollable && !this.slideIsAutonomic) {
             let value = this.scroll;
             value *= -100;
-            if (this.projector.show_header_footer) {
+            if (this.projector && this.projector.show_header_footer) {
                 value += 50; // Default offset for the header
             }
             this.slideStyle['margin-top'] = `${value}px`;

client/src/app/shared/components/sort-filter-bar/sort-bottom-sheet/sort-bottom-sheet.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
 
 import { BaseSortListService } from 'app/core/ui-services/base-sort-list.service';
 import { BaseViewModel } from 'app/site/base/base-view-model';

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts

@@ -89,7 +89,7 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
     /**
      * The bottom sheet used to alter sorting in mobile view
      */
-    @ViewChild('sortBottomSheet', { static: false })
+    @ViewChild('sortBottomSheet')
     public sortBottomSheet: SortBottomSheetComponent<V>;
 
     /**

client/src/app/shared/components/user-menu/user-menu.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 

client/src/app/shared/date-adapter.ts

@@ -1,10 +1,10 @@
 import { Inject, Injectable, Optional } from '@angular/core';
-import { MAT_DATE_LOCALE } from '@angular/material';
 import {
-    MAT_MOMENT_DATE_ADAPTER_OPTIONS,
     MatMomentDateAdapterOptions,
+    MAT_MOMENT_DATE_ADAPTER_OPTIONS,
     MomentDateAdapter
 } from '@angular/material-moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
 
 import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
 

client/src/app/shared/models/base/base-form-control.ts

@@ -2,7 +2,7 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ElementRef, HostBinding, Input, OnDestroy, Optional, Self } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormControl, FormGroup, NgControl } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material';
+import { MatFormFieldControl } from '@angular/material/form-field';
 
 import { Subject, Subscription } from 'rxjs';
 

client/src/app/shared/shared.module.ts

@@ -16,7 +16,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -116,7 +116,6 @@ import { CheckInputComponent } from './components/check-input/check-input.compon
 import { BannerComponent } from './components/banner/banner.component';
 import { PollFormComponent } from 'app/site/polls/components/poll-form/poll-form.component';
 import { MotionPollDialogComponent } from 'app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component';
-import { AssignmentPollDialogComponent } from 'app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component';
 import { ParsePollNumberPipe } from './pipes/parse-poll-number.pipe';
 import { ReversePipe } from './pipes/reverse.pipe';
 import { PollKeyVerbosePipe } from './pipes/poll-key-verbose.pipe';
@@ -287,7 +286,6 @@ import { UserMenuComponent } from './components/user-menu/user-menu.component';
         BannerComponent,
         PollFormComponent,
         MotionPollDialogComponent,
-        AssignmentPollDialogComponent,
         ParsePollNumberPipe,
         ReversePipe,
         PollKeyVerbosePipe,
@@ -348,7 +346,6 @@ import { UserMenuComponent } from './components/user-menu/user-menu.component';
         BannerComponent,
         PollFormComponent,
         MotionPollDialogComponent,
-        AssignmentPollDialogComponent,
         ParsePollNumberPipe,
         ReversePipe,
         PollKeyVerbosePipe,
@@ -376,18 +373,6 @@ import { UserMenuComponent } from './components/user-menu/user-menu.component';
         ReversePipe,
         PollKeyVerbosePipe,
         PollPercentBasePipe
-    ],
-    entryComponents: [
-        SortBottomSheetComponent,
-        C4DialogComponent,
-        PromptDialogComponent,
-        ChoiceDialogComponent,
-        ProjectionDialogComponent,
-        ProgressSnackBarComponent,
-        SuperSearchComponent,
-        MotionPollDialogComponent,
-        AssignmentPollDialogComponent,
-        VotingPrivacyWarningComponent
     ]
 })
 export class SharedModule {}

client/src/app/site/agenda/agenda.module.ts

@@ -14,7 +14,6 @@ import { SharedModule } from '../../shared/shared.module';
  */
 @NgModule({
     imports: [CommonModule, AgendaRoutingModule, SharedModule],
-    entryComponents: [ItemInfoDialogComponent],
     declarations: [
         AgendaListComponent,
         ItemInfoDialogComponent,

client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.ts

@@ -8,7 +8,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ItemVisibilityChoices } from 'app/shared/models/agenda/item';
-import { SortTreeFilterOption, SortTreeViewComponent } from 'app/site/base/sort-tree.component';
+import { SortTreeFilterOption, SortTreeViewComponentDirective } from 'app/site/base/sort-tree.component';
 import { ViewItem } from '../../models/view-item';
 
 /**
@@ -19,7 +19,7 @@ import { ViewItem } from '../../models/view-item';
     templateUrl: './agenda-sort.component.html',
     styleUrls: ['./agenda-sort.component.scss']
 })
-export class AgendaSortComponent extends SortTreeViewComponent<ViewItem> implements OnInit {
+export class AgendaSortComponent extends SortTreeViewComponentDirective<ViewItem> implements OnInit {
     /**
      * All agendaItems sorted by their weight {@link ViewItem.weight}
      */

client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 

client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { DurationService } from 'app/core/ui-services/duration.service';
 import { ItemVisibilityChoices } from 'app/shared/models/agenda/item';

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.ts

@@ -34,7 +34,7 @@ import { SpeakerState, ViewSpeaker } from '../../models/view-speaker';
     styleUrls: ['./list-of-speakers.component.scss']
 })
 export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit {
-    @ViewChild(SortingListComponent, { static: false })
+    @ViewChild(SortingListComponent)
     public listElement: SortingListComponent;
 
     /**

client/src/app/site/agenda/services/agenda-pdf.service.spec.ts

@@ -12,7 +12,7 @@ describe('AgendaPdfService', () => {
     );
 
     it('should be created', () => {
-        const service: AgendaPdfService = TestBed.get(AgendaPdfService);
+        const service: AgendaPdfService = TestBed.inject(AgendaPdfService);
         expect(service).toBeTruthy();
     });
 });

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

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AssignmentDetailComponent } from './components/assignment-detail/assignment-detail.component';
 import { AssignmentListComponent } from './components/assignment-list/assignment-list.component';
 import { AssignmentPollDetailComponent } from './components/assignment-poll-detail/assignment-poll-detail.component';
+import { AssignmentPollDialogComponent } from './components/assignment-poll-dialog/assignment-poll-dialog.component';
 import { AssignmentPollVoteComponent } from './components/assignment-poll-vote/assignment-poll-vote.component';
 import { AssignmentPollComponent } from './components/assignment-poll/assignment-poll.component';
 import { AssignmentsRoutingModule } from './assignments-routing.module';
@@ -17,7 +18,8 @@ import { SharedModule } from '../../shared/shared.module';
         AssignmentListComponent,
         AssignmentPollComponent,
         AssignmentPollDetailComponent,
-        AssignmentPollVoteComponent
+        AssignmentPollVoteComponent,
+        AssignmentPollDialogComponent
     ]
 })
 export class AssignmentsModule {}

client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 

client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 

client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 

client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/assignments/components/assignment-poll-vote/assignment-poll-vote.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/assignments/services/assignment-pdf-export.service.spec.ts

@@ -12,7 +12,7 @@ describe('AssignmentPdfExportService', () => {
     );
 
     it('should be created', () => {
-        const service: AssignmentPdfExportService = TestBed.get(AssignmentPdfExportService);
+        const service: AssignmentPdfExportService = TestBed.inject(AssignmentPdfExportService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/site/assignments/services/assignment-pdf.service.spec.ts

@@ -12,7 +12,7 @@ describe('AssignmentPdfService', () => {
     );
 
     it('should be created', () => {
-        const service: AssignmentPdfService = TestBed.get(AssignmentPdfService);
+        const service: AssignmentPdfService = TestBed.inject(AssignmentPdfService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/site/assignments/services/assignment-poll-dialog.service.spec.ts

@@ -12,7 +12,7 @@ describe('AssignmentPollDialogService', () => {
     );
 
     it('should be created', () => {
-        const service: AssignmentPollDialogService = TestBed.get(AssignmentPollDialogService);
+        const service: AssignmentPollDialogService = TestBed.inject(AssignmentPollDialogService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/site/assignments/services/assignment-poll-dialog.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import { CollectionStringMapperService } from 'app/core/core-services/collection-string-mapper.service';
 import { BasePollDialogService } from 'app/core/ui-services/base-poll-dialog.service';

client/src/app/site/assignments/services/assignment-poll-pdf.service.spec.ts

@@ -12,7 +12,7 @@ describe('MotionPdfService', () => {
     );
 
     it('should be created', () => {
-        const service: AssignmentPollPdfService = TestBed.get(AssignmentPollPdfService);
+        const service: AssignmentPollPdfService = TestBed.inject(AssignmentPollPdfService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/site/assignments/services/assignment-poll.service.spec.ts

@@ -12,7 +12,7 @@ describe('AssignmentPollService', () => {
     );
 
     it('should be created', () => {
-        const service: AssignmentPollService = TestBed.get(AssignmentPollService);
+        const service: AssignmentPollService = TestBed.inject(AssignmentPollService);
         expect(service).toBeTruthy();
     });
 });

client/src/app/site/base/base-import-list.ts

@@ -1,4 +1,4 @@
-import { OnInit, ViewChild } from '@angular/core';
+import { Directive, OnInit, ViewChild } from '@angular/core';
 import { MatSelectChange } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
@@ -12,7 +12,9 @@ import { BaseModel } from 'app/shared/models/base/base-model';
 import { getLongPreview, getShortPreview } from 'app/shared/utils/previewStrings';
 import { BaseViewComponent } from './base-view';
 
-export abstract class BaseImportListComponent<M extends BaseModel> extends BaseViewComponent implements OnInit {
+@Directive()
+export abstract class BaseImportListComponentDirective<M extends BaseModel> extends BaseViewComponent
+    implements OnInit {
     /**
      * The data source for a table. Requires to be initialised with a BaseViewModel
      */
@@ -47,7 +49,7 @@ export abstract class BaseImportListComponent<M extends BaseModel> extends BaseV
     /**
      * The table itself
      */
-    @ViewChild(MatTable, { static: false })
+    @ViewChild(MatTable)
     protected table: MatTable<NewEntry<M>>;
 
     /**

client/src/app/site/base/sort-tree.component.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, ViewChild } from '@angular/core';
+import { Directive, EventEmitter, ViewChild } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
@@ -21,7 +21,8 @@ export interface SortTreeFilterOption extends Identifiable {
 /**
  * Abstract Sort view for hierarchic item trees
  */
-export abstract class SortTreeViewComponent<V extends BaseViewModel> extends BaseViewComponent
+@Directive()
+export abstract class SortTreeViewComponentDirective<V extends BaseViewModel> extends BaseViewComponent
     implements CanComponentDeactivate {
     /**
      * Reference to the view child

client/src/app/site/common/components/legal-notice/legal-notice.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/common/components/privacy-policy/privacy-policy.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/common/components/start/start.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core'; // showcase

client/src/app/site/common/components/super-search/super-search.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostListener, Inject, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 
 import { auditTime, debounceTime } from 'rxjs/operators';
@@ -209,10 +209,7 @@ export class SuperSearchComponent implements OnInit {
             splittedQuery = query.split(':', 2);
             splittedQuery.push(
                 // Get the second part of the query and split it into single words.
-                ...splittedQuery
+                ...splittedQuery.pop().trim().split(/\s/g)
-                    .pop()
-                    .trim()
-                    .split(/\s/g)
             );
         } else {
             splittedQuery = query.split(/\s/g);

client/src/app/site/config/config.module.ts

@@ -10,7 +10,6 @@ import { SharedModule } from '../../shared/shared.module';
 
 @NgModule({
     imports: [CommonModule, ConfigRoutingModule, SharedModule],
-    declarations: [ConfigOverviewComponent, ConfigListComponent, ConfigFieldComponent, CustomTranslationComponent],
+    declarations: [ConfigOverviewComponent, ConfigListComponent, ConfigFieldComponent, CustomTranslationComponent]
-    entryComponents: [CustomTranslationComponent]
 })
 export class ConfigModule {}

client/src/app/site/history/components/history-list/history-list.component.ts

@@ -129,20 +129,11 @@ export class HistoryListComponent extends BaseViewComponent implements OnInit {
                 return true;
             }
 
-            if (
+            if (this.getElementInfo(history) && this.getElementInfo(history).toLowerCase().indexOf(filter) >= 0) {
-                this.getElementInfo(history) &&
-                this.getElementInfo(history)
-                    .toLowerCase()
-                    .indexOf(filter) >= 0
-            ) {
                 return true;
             }
 
-            return (
+            return this.parseInformation(history).toLowerCase().indexOf(filter) >= 0;
-                this.parseInformation(history)
-                    .toLowerCase()
-                    .indexOf(filter) >= 0
-            );
         };
 
         // If an element id is given, validate it and update the view.

client/src/app/site/login/components/login-mask/login-mask.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 

client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.spec.ts

@@ -1,11 +1,11 @@
-import { async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed, tick } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { E2EImportsModule } from 'e2e-imports.module';
 
 import { ResetPasswordConfirmComponent } from './reset-password-confirm.component';
 
-let matSnackBarSpy: jasmine.SpyObj<MatSnackBar>;
+let matSnackBarSpy: MatSnackBar;
 
 describe('ResetPasswordConfirmComponent', () => {
     let component: ResetPasswordConfirmComponent;
@@ -18,28 +18,32 @@ describe('ResetPasswordConfirmComponent', () => {
             imports: [E2EImportsModule],
             providers: [{ provide: MatSnackBar, useValue: spy }]
         }).compileComponents();
-        matSnackBarSpy = TestBed.get(MatSnackBar);
+        matSnackBarSpy = TestBed.inject(MatSnackBar);
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(ResetPasswordConfirmComponent);
         component = fixture.componentInstance;
-        // fixture.detectChanges();
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
     });
 
-    xit('should open a snackbar error', fakeAsync(() => {
+    /**
-        // WTF? I do not kno what to do more, but the expect should run after the set timeout...
+     * TODO:
-        fixture.detectChanges();
+     * TestBed.inject does not return a spy anmore, thus this seems to be deprecated.
-        tick();
+     */
-        fixture.detectChanges();
+    // xit('should open a snackbar error', fakeAsync(() => {
-        flush();
+    //     // WTF? I do not kno what to do more, but the expect should run after the set timeout...
-        fixture.detectChanges();
+    //     fixture.detectChanges();
-        flushMicrotasks();
+    //     tick();
-        fixture.detectChanges();
+    //     fixture.detectChanges();
-        expect(matSnackBarSpy.open.calls.count()).toBe(1, 'mat snack bar was opened');
+    //     flush();
-    }));
+    //     fixture.detectChanges();
+    //     flushMicrotasks();
+    //     fixture.detectChanges();
+    //     // expect(matSnackBarSpy.open.calls.count()).toBe(1, 'mat snack bar was opened');
+    //     // expect(matSnackBarSpy.open.
+    // }));
 });

client/src/app/site/motions/modules/amendment-list/amendment-list.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatDialog, MatSnackBar } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 

client/src/app/site/motions/modules/call-list/call-list.component.ts

@@ -10,7 +10,7 @@ import { MotionRepositoryService } from 'app/core/repositories/motions/motion-re
 import { TagRepositoryService } from 'app/core/repositories/tags/tag-repository.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { FlatNode } from 'app/core/ui-services/tree.service';
-import { SortTreeFilterOption, SortTreeViewComponent } from 'app/site/base/sort-tree.component';
+import { SortTreeFilterOption, SortTreeViewComponentDirective } from 'app/site/base/sort-tree.component';
 import { ViewMotion } from 'app/site/motions/models/view-motion';
 import { MotionCsvExportService } from 'app/site/motions/services/motion-csv-export.service';
 import { MotionPdfExportService } from 'app/site/motions/services/motion-pdf-export.service';
@@ -27,7 +27,7 @@ import { ViewTag } from 'app/site/tags/models/view-tag';
         '../../../../shared/components/sort-filter-bar/sort-filter-bar.component.scss'
     ]
 })
-export class CallListComponent extends SortTreeViewComponent<ViewMotion> implements OnInit {
+export class CallListComponent extends SortTreeViewComponentDirective<ViewMotion> implements OnInit {
     /**
      * All motions sorted first by weight, then by id.
      */

client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 

client/src/app/site/motions/modules/motion-comment-section/components/motion-comment-section-list/motion-comment-section-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 

client/src/app/site/motions/modules/motion-comment-section/components/motion-comment-section-sort/motion-comment-section-sort.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';