Update to angular 10

Author: julienboulay

.browserslistrc

@@ -0,0 +1,18 @@
+# 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
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.editorconfig

@@ -1,4 +1,4 @@
-# Editor configuration, see http://editorconfig.org
+# Editor configuration, see https://editorconfig.org
 root = true
 
 [*]
@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

.gitignore

@@ -4,10 +4,16 @@
 /dist
 /tmp
 /out-tsc
+# Only exists if Bazel was run
+/bazel-out
 
 # dependencies
 /node_modules
 
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
 # IDEs and editors
 /.idea
 .project
@@ -23,6 +29,7 @@
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*
 
 # misc
 /.sass-cache

LICENSE renamed to LICENCE

@@ -16,7 +16,7 @@
 
 ## Demo
 
-*Coming soon...*
+_Coming soon..._
 
 ## Installation
 
@@ -32,19 +32,16 @@ npm install --save quagga ngx-barcode-scanner
 
 ```typescript
 //demo.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
 
-import { BarecodeScannerLivestreamModule } from 'ngx-barcode-scanner';
-import { Demo } from './demo.component';
+import { BarecodeScannerLivestreamModule } from "ngx-barcode-scanner";
+import { Demo } from "./demo.component";
 
 @NgModule({
-    declarations: [Demo],
-    imports: [
-        BrowserModule,
-        BarecodeScannerLivestreamModule
-    ],
-    bootstrap: [Demo]
+  declarations: [Demo],
+  imports: [BrowserModule, BarecodeScannerLivestreamModule],
+  bootstrap: [Demo],
 })
 export class DemoModule {}
 ```
@@ -55,64 +52,52 @@ This component creates a barcode scanner.
 
 ```typescript
 //demo.component.ts
-import { Component, ViewChild, AfterViewInit } from '@angular/core';
-import { BarecodeScannerLivestreamComponent } from 'ngx-barcode-scanner';
-
+import { Component, ViewChild, AfterViewInit } from "@angular/core";
+import { BarecodeScannerLivestreamComponent } from "ngx-barcode-scanner";
 
 @Component({
-  selector: 'demo-app',
+  selector: "demo-app",
   template: `
-    <barcode-scanner-livestream type="code_128" (valueChanges)="onValueChanges($event)" (started)="onStarted"></barcode-scanner-livestream>
+    <barcode-scanner-livestream
+      type="code_128"
+      (valueChanges)="onValueChanges($event)"
+      (started)="(onStarted)"
+    ></barcode-scanner-livestream>
     <div [hidden]="!barcodeValue">
-        {{barcodeValue}}
+      {{ barcodeValue }}
     </div>
-  `
+  `,
 })
-export class Demo implements AfterViewInit{
-
-    @ViewChild(BarecodeScannerLivestreamComponent)
-    barecodeScanner: BarecodeScannerLivestreamComponent;
+export class Demo implements AfterViewInit {
+  @ViewChild(BarecodeScannerLivestreamComponent)
+  barecodeScanner: BarecodeScannerLivestreamComponent;
 
-    barcodeValue;
+  barcodeValue;
 
-    ngAfterViewInit() {
-        this.barecodeScanner.start();
-    }
+  ngAfterViewInit() {
+    this.barecodeScanner.start();
+  }
 
-    onValueChanges(result){
-        this.barcodeValue = result.codeResult.code;
-    }
+  onValueChanges(result) {
+    this.barcodeValue = result.codeResult.code;
+  }
 
-    onStarted(started){
-        console.log(started);
-    }
+  onStarted(started) {
+    console.log(started);
+  }
 }
 ```
 
 ## Development
 
 ### Development server
 
-Open a command line and run `ng build ngx-barcode-scanner --watch` for incremental build of the library
-
-Run `npm run start` for a dev server, on the example app. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` or `npm run start` for a dev server, on the example app. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ### Build
 
 Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-### Package
-
-Run `npm run package` to package the project.
-The project can then be installed with `npm install <relative_dir>/dist/ngx-barcode-scanner/ngx-barcode-scanner-<version>.tgz`
-
-### Release
-
-- Bump the version in package.json
-- Commit and push to github
-- Login to your npm account with `npm login`
-- Publish to npm repository with `npm run release`
-
 ## Known issues
 
 Access to the camera is restricted on iOS when running in a Progressive Web App. Live streaming will not work in this case.

README.md

@@ -4,11 +4,15 @@
   "newProjectRoot": "projects",
   "projects": {
     "ngx-barcode-scanner-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -17,13 +21,14 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -40,10 +45,21 @@
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
             }
           }
         },
@@ -69,36 +85,31 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": [],
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
               "src/assets"
-            ]
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
             ]
           }
-        }
-      }
-    },
-    "ngx-barcode-scanner-app-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "architect": {
+        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -110,33 +121,24 @@
               "devServerTarget": "ngx-barcode-scanner-app:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
     "ngx-barcode-scanner": {
+      "projectType": "library",
       "root": "projects/ngx-barcode-scanner",
       "sourceRoot": "projects/ngx-barcode-scanner/src",
-      "projectType": "library",
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/ngx-barcode-scanner/tsconfig.lib.json",
             "project": "projects/ngx-barcode-scanner/ng-package.json"
           },
           "configurations": {
             "production": {
-              "project": "projects/ngx-barcode-scanner/ng-package.prod.json"
+              "tsConfig": "projects/ngx-barcode-scanner/tsconfig.lib.prod.json"
             }
           }
         },
@@ -161,7 +163,6 @@
           }
         }
       }
-    }
-  },
+    }},
   "defaultProject": "ngx-barcode-scanner-app"
-}
+}

angular.json

@@ -1,15 +1,19 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
     './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
@@ -21,8 +25,12 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
+      project: require('path').join(__dirname, './tsconfig.json')
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
   }
 };

e2e/protractor.conf.js

@@ -1,3 +1,4 @@
+import { browser, logging } from 'protractor';
 import { AppPage } from './app.po';
 
 describe('workspace-project App', () => {
@@ -9,6 +10,15 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to ngx-barcode-scanner-app!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(
+      jasmine.objectContaining({
+        level: logging.Level.SEVERE,
+      } as logging.Entry)
+    );
   });
 });