Uncaught TypeError: Cannot read property '_android' of undefined

[bop10]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 7.

Description

I have an app builded and deployed in Angular 7. I recently updated to Angular 8, and i did the build process and deployed the app (firebase). The build process was successful, without any errors.

When the Service worker catched the new version, the error pops up and i cant see the app.

🔬 Minimal Reproduction

Just builded the app.

🔥 Exception or Error

Opening the app in Chrome:

Uncaught TypeError: Cannot read property '_android' of undefined
    at main-es2015.99eb7919e867c9682928.js:1
    at main-es2015.99eb7919e867c9682928.js:1
    at Object.0ERz (main-es2015.99eb7919e867c9682928.js:1)
    at f (runtime-es2015.987370643d85154147b2.js:1)
    at Object.JJ7l (main-es2015.99eb7919e867c9682928.js:1)
    at f (runtime-es2015.987370643d85154147b2.js:1)
    at Object.k2u+ (main-es2015.99eb7919e867c9682928.js:1)
    at f (runtime-es2015.987370643d85154147b2.js:1)
    at Module.zUnb (main-es2015.99eb7919e867c9682928.js:1)
    at f (runtime-es2015.987370643d85154147b2.js:1)

If i click on the error, the fail is here:
if(this._android&&this._android<=2.1){var t=1/window.devicePixelRatio...

Opening the app in Safari, the error is in this piece of code:

if (this._android && this._android <= 2.1) {
                        var e = 1 / window.devicePixelRatio,
                            n = CanvasRenderingContext2D.prototype.drawImage;
                        CanvasRenderingContext2D.prototype.drawImage = function(t, i, r, o, a, s, l, u, c) {
                            if ("nodeName" in t && /img/i.test(t.nodeName))
                                for (var d = arguments.length - 1; d >= 1; d--)
                                    arguments[d] = arguments[d] * e;
                            else
                                void 0 === u && (arguments[1] *= e, arguments[2] *= e, arguments[3] *= e, arguments[4] *= e);
                            n.apply(this, arguments)
                        }
                    }

Opening the app in FireFox:
TypeError: this is undefined

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.4
Node: 11.11.0
OS: darwin x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.4
@angular-devkit/build-angular      0.800.4
@angular-devkit/build-optimizer    0.800.4
@angular-devkit/build-webpack      0.800.4
@angular-devkit/core               8.0.4
@angular-devkit/schematics         8.0.4
@angular/cdk                       8.0.1
@angular/cli                       8.0.4
@angular/flex-layout               8.0.0-beta.26
@angular/material                  8.0.1
@angular/material-moment-adapter   8.0.1
@ngtools/webpack                   8.0.4
@schematics/angular                8.0.4
@schematics/update                 0.800.4
rxjs                               6.5.2
typescript                         3.4.5

I can do ng serve and even ng serve --configuration=production and no errors popped up in my browser, just happens on the builded app.

[alan-agius4]

Hi, thanks for opening this issue, this shares the same root causes as #14747

There is an explanation on why this is happens here: #14747 (comment)

The most important part being the last point in this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#Other_differences_between_modules_and_standard_scripts,`

A top-level this will always be undefined inside a module, hence if you want to access a global object, you need to use window etc..

[bop10]

Thanks @alan-agius4 , the problem is with angularx-qrcode library, i found this related issue: Cordobo/angularx-qrcode#49

[ramakrishna567]

@bop10 I got same issue when I used "angularx-qrcod" lib. Can you explain, Why It this issue come. what's the problem with this library?

[martiendejong]

@bop10 I got same issue when I used "angularx-qrcod" lib. Can you explain, Why It this issue come. what's the problem with this library?

I use this library too, same issue.

[martiendejong]

@bop10 I got same issue when I used "angularx-qrcod" lib. Can you explain, Why It this issue come. what's the problem with this library?

I found the solution:
Set the target to es5 in the tsconfig.json
Cordobo/angularx-qrcode#53

[ramakrishna567]

@martiendejong Ok, But is there any Performance problem with replace of target : es2015 to es5 to Our Apps

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}