search

goergch / angular2-qrscanner

An angular 2 qr code scanner
GNU General Public License v3.0
21 stars 41 forks source link

Works in development, errors when built with webpack using AOT for production with universal #29

Closed peterdobson closed 6 years ago

peterdobson commented 6 years ago

This angular2-qrscanner works great when running in development via localhost, but when I build and deploy for production I get the following line in the console log:

"QR Scanner init, facing undefined"

followed by error:

"vendor.js:8 ERROR TypeError: Cannot read property 'style' of null at t.initCanvas..

I am using angular 4 with universal for Server Side Rendering.

I've tried excluding angular2-qrscanner from tree-shaking, tried gating with <div *ngIf="isBrowser">

tags, tried moving the imports from main app.module to the app.module.browser, but none of this seems to work.

Anyone have any ideas?

moshmage commented 6 years ago

I'm using this on production, with AOT. can you make a minimal plunkr for reproduction?

or... you can try vNext branch and check if it solves your problem

hamazaspavetisyan commented 6 years ago

Hi ! When are you planning the release vNext ? I have same AOT problem. Thanks

peterdobson commented 6 years ago

@hamazaspavetisyan My suspicion is that the issues are related to using angular2-qrscanner with universal. There are many references to window, navigator etc e.g. in qr-scanner.component.ts (even in the vNext version) and these don't play well with universal. For some libraries, just gating them in the html a<div *ngIf="isBrowser">

check works around these issues (you obviously don't need to render a scanner server-side), but this does not work with angular2-qrscanner. I've seen discussions around resolving these issues by mocking the components and importing the mock version in main.browser.ts, which I've attempted but not got it working. There is a similar issue being discussed for a different component over here: https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/462. No solutions though. If anyone has any ideas they would be appreciated!

hamazaspavetisyan commented 6 years ago

Buy the way, I am not using the universal.

datencia commented 6 years ago

Hi,

I think I'm facing a similar issue with Ionic and AOT. I'm getting next error when I build the project for prod.

λ npm run build --prod

> demo-qrscanner@1.0.0 build C:\Projects\demo-qrscanner
> ionic-app-scripts build

[12:10:05]  ionic-app-scripts 1.3.12
[12:10:05]  build prod started ...
[12:10:05]  clean started ...
[12:10:05]  clean finished in 23 ms
[12:10:05]  copy started ...
[12:10:05]  ngc started ...
[12:10:35]  ngc finished in 29.58 s
[12:10:35]  preprocess started ...
[12:10:35]  deeplinks started ...
[12:10:37]  deeplinks finished in 2.65 s
[12:10:37]  optimization started ...
[12:10:49]  copy finished in 44.23 s
[12:10:53]  ionic-app-script task: "build"
[12:10:53]  Error: ./~/angular2-qrscanner/src/qrdecode/qrcode.ts Module build failed: TypeError: Cannot read property
            'content' of undefined at Object.optimizationLoader
            (C:\Projects\demo-qrscanner\node_modules\@ionic\app-scripts\dist\webpack\optimization-loader-impl.js:14:24) at
            Object.loader (C:\Projects\demo-qrscanner\node_modules\@ionic\app-scripts\dist\webpack\optimization-loader.js:5:32)
            @ ./~/angular2-qrscanner/src/qrscanner.component.js 9:15-43 @
            ./src/app/shared/services/barcode-scanner/qr-scanner.component.ngfactory.js @
            ./src/app/app.module.ngfactory.js @ ./src/app/main.ts
Error: ./~/angular2-qrscanner/src/qrdecode/qrcode.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (C:\Projects\demo-qrscanner\node_modules\@ionic\app-scripts\dist\webpack\optimization-loader-impl.js:14:24)
    at Object.loader (C:\Projects\demo-qrscanner\node_modules\@ionic\app-scripts\dist\webpack\optimization-loader.js:5:32)
 @ ./~/angular2-qrscanner/src/qrscanner.component.js 9:15-43
 @ ./src/app/shared/services/barcode-scanner/qr-scanner.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts
    at BuildError.Error (native)
    at new BuildError (C:\Projects\demo-qrscanner\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
    at C:\Projects\demo-qrscanner\node_modules\@ionic\app-scripts\dist\preprocess.js:18:21
    at process._tickCallback (internal/process/next_tick.js:109:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo-qrscanner@1.0.0 build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo-qrscanner@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Datencia\AppData\Roaming\npm-cache\_logs\2018-01-19T11_10_53_842Z-debug.log
AbdulRayhman commented 6 years ago

Having the same issue, in development mode works like charm. With ng build --prod gives an error.

ERROR in ./node_modules/angular2-qrscanner/src/qrscanner.component.ngfactory.ts
Module build failed: Error: C:\Users\HoD\Documents\Projects\Wallet Project\cryptogenx\node_modules\angu
lar2-qrscanner\src\qrscanner.component.ngfactory.ts is missing from the TypeScript compilation. Please
make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a
 sign of a badly packaged library. Please open an issue in the library repository to alert its author a
nd ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (C:\Users\HoD\Documents\Projects\Wallet Project\cryptogenx
\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:656:23)
    at plugin.done.then (C:\Users\HoD\Documents\Projects\Wallet Project\cryptogenx\node_modules\@ngtool
s\webpack\src\loader.js:467:39)
    at <anonymous>
 @ ./src/app/admin-layout/sendModal/scanQRCodeCamModal/scanQRCodeCamModal.component.ngfactory.js 13:0-1
03
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

My package.json

{
    "name": "wallet-admin-app",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "0.1.0": "^1.0.0",
        "@angular/animations": "^5.1.1",
        "@angular/cdk": "^5.0.1",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/material": "^5.0.1",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/router": "^5.0.0",
        "@auth0/angular-jwt": "^1.0.0-beta.9",
        "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
        "@ngx-translate/core": "^9.0.2",
        "@ngx-translate/http-loader": "^2.0.1",
        "angular-async-local-storage": "^3.0.0",
        "angular-highcharts": "^5.2.0",
        "angular2-qrcode": "^2.0.1",
        "angular2-qrscanner": "^0.1.12",
        "bootstrap": "4.0.0-beta",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "highcharts": "^6.0.4",
        "jquery": "^3.2.1",
        "ng-circle-progress": "^0.9.8",
        "ng2-qrcode-reader": "0.0.1",
        "ngx-clipboard": "^9.1.2",
        "ngx-pagination": "^3.0.3",
        "ngx-qrcode2": "0.0.5",
        "ngx-toastr": "^8.1.0",
        "rxjs": "^5.5.2",
        "speakeasy": "^2.0.0",
        "sweetalert2": "^7.3.2",
        "zone.js": "^0.8.14"
    },
    "devDependencies": {
        "@angular-devkit/core": "0.0.28",
        "@angular/cli": "^1.5.4",
        "@angular/compiler-cli": "^5.2.1",
        "@angular/language-service": "^5.0.0",
        "@types/highcharts": "^5.0.12",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/jquery": "^3.2.17",
        "@types/node": "~6.0.60",
        "codelyzer": "^4.0.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.4.2"
    }
}
peterdobson commented 6 years ago

anyone had any success with this?

dewolft commented 6 years ago

i've the same issue... nobody have found a solution? with ng build --prod

ERROR in ./node_modules/angular2-qrscanner/src/qrscanner.component.ngfactory.ts Module build failed: Error: \node_modules\angular2-qrscanner\src\qrscanner.component.ngfactory.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:662:23) at plugin.done.then (\node_modules\@ngtools\webpack\src\loader.js:467:39) at @ ./src/app/leggiticket/leggiticket.component.ngfactory.js 8:0-97 @ ./src/app/app.module.ngfactory.js @ ./src/main.ts @ multi ./src/main.ts

peterdobson commented 6 years ago

https://github.com/goergch/angular2-qrscanner/commit/9c9e42654ece592748c83166ffb268c7da42f5e2 fixed it for me, thank you @goergch !