Updated to Angular 8.

package.json

@@ -44,34 +44,33 @@
     "deploy:demo": "ng build zxing-scanner-demo --prod --base-href /ngx-scanner/ && npx ngh --dir=dist/zxing-scanner-demo"
   },
   "dependencies": {
-    "@angular/animations": "^7.0.0",
-    "@angular/cdk": "~7.3.7",
-    "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
-    "@angular/material": "7.3.7",
-    "@angular/platform-browser": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@angular/router": "^7.0.0",
-    "@zxing/library": "^0.14.1",
+    "@angular/animations": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/cdk": ">=7.3.7 <8 || ~8.0.1",
+    "@angular/common": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/core": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/forms": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/material": ">=7.3.7 <8 || 8.0.1",
+    "@angular/platform-browser": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/platform-browser-dynamic": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/router": ">=7.0.0 <8 || ^8.0.2",
+    "@zxing/library": "^0.14.2",
     "hammerjs": "^2.0.8",
     "rxjs": "^6.5.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.4",
-    "@angular-devkit/build-ng-packagr": "^0.12.3",
-    "@angular-devkit/core": "^7.0.4",
-    "@angular/cli": "~7.3.9",
-    "@angular/compiler": "^7.0.0",
-    "@angular/compiler-cli": "^7.2.15",
-    "@angular/language-service": "^7.2.15",
+    "@angular-devkit/build-angular": ">=0.10.4 || ~0.800.0",
+    "@angular-devkit/build-ng-packagr": ">=0.12.3 || ~0.800.0",
+    "@angular-devkit/core": ">=7.0.4 <8 || ^8.0.4",
+    "@angular/cli": ">=7.3.9 <8 || ~8.0.4",
+    "@angular/compiler": ">=7.0.0 <8 || ^8.0.2",
+    "@angular/compiler-cli": ">=7.2.15 <8 || ^8.0.2",
+    "@angular/language-service": ">=7.2.15 <8 || ^8.0.2",
     "@compodoc/compodoc": "^1.1.1",
     "@types/jasmine": "^2.8.6",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "^10.12.2",
     "angular-cli-ghpages": "^0.5.3",
-    "codelyzer": "^4.3.0",
+    "codelyzer": "^5.0.1",
     "core-js": "^2.5.5",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",
@@ -81,14 +80,15 @@
     "karma-coverage-istanbul-reporter": "^2.0.4",
     "karma-jasmine": "^1.1.1",
     "karma-jasmine-html-reporter": "^1.4.0",
-    "ng-packagr": "^4.4.0",
+    "ng-packagr": "^5.1.0",
     "npm-install-peers": "^1.2.1",
     "protractor": "^5.3.1",
     "ts-node": "^7.0.1",
-    "tsickle": "^0.33.1",
-    "tslint": "^5.9.1",
-    "typescript": "~3.1.3",
-    "zone.js": "^0.8.26"
+    "tsickle": "^0.35.0",
+    "tslib": "^1.10.0",
+    "tslint": "^5.18.0",
+    "typescript": ">=3.4.0 <3.5.0",
+    "zone.js": "~0.9.1"
   },
   "collective": {
     "type": "opencollective",

projects/zxing-scanner-demo/browserslist

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

projects/zxing-scanner-demo/src/app/app-info-dialog/app-info-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-info-dialog',

projects/zxing-scanner-demo/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { BarcodeFormat } from '@zxing/library';
 import { BehaviorSubject } from 'rxjs';
 import { FormatsDialogComponent } from './formats-dialog/formats-dialog.component';

projects/zxing-scanner-demo/src/app/app.module.ts

@@ -1,6 +1,13 @@
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatSelectModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatListModule } from '@angular/material/list';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

projects/zxing-scanner-demo/src/app/formats-dialog/formats-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MatSelectionListChange, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSelectionListChange } from '@angular/material/list';
 import { BarcodeFormat } from '@zxing/library';
 import { formatNames, formatsAvailable } from '../barcode-formats';
 

projects/zxing-scanner-demo/src/polyfills.ts

@@ -18,31 +18,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
- *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
- */
-
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -65,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

projects/zxing-scanner/src/lib/browser-multi-format-continuous-reader.ts

@@ -145,7 +145,7 @@ export class BrowserMultiFormatContinuousReader extends BrowserMultiFormatReader
 
   /**
    *
-   * @param stream
+   * @param stream The media stream.
    */
   private getVideoTracks(stream: MediaStream) {
     let tracks = [];
@@ -159,7 +159,7 @@ export class BrowserMultiFormatContinuousReader extends BrowserMultiFormatReader
 
   /**
    *
-   * @param track
+   * @param track The media stream track.
    */
   private async isTorchCompatible(track: MediaStreamTrack) {
 

projects/zxing-scanner/src/lib/zxing-scanner.component.ts

@@ -73,7 +73,7 @@ export class ZXingScannerComponent implements AfterViewInit, OnDestroy {
   /**
    * Reference to the preview element, should be the `video` tag.
    */
-  @ViewChild('preview')
+  @ViewChild('preview', { static: true })
   previewElemRef: ElementRef<HTMLVideoElement>;
 
   /**

tsconfig.json

@@ -2,15 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -73,7 +73,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [
@@ -118,12 +117,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true