Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

sometime form .get return null #35219

Closed
mix5003 opened this issue Feb 7, 2020 · 30 comments
Closed

sometime form .get return null #35219

mix5003 opened this issue Feb 7, 2020 · 30 comments

Comments

@mix5003
Copy link

@mix5003 mix5003 commented Feb 7, 2020

馃悶 bug report

sometime form .get return null. i have no idea why?
for example in my code i just add withholdingTax.items in to form and i try to subscribe valueChanges but it said i try to access valueChanges of null value
valueChangesOfNull1
valueChangesOfNull2

After i try to find a re-produce step to fix it i found that sometime form.get will return null. as you can see in next screenshot line 195 and 199 is same code (console.log(this.form.get('withholdingTax.items')); and not touch any controls in the form but result is different
valueChangesOfNull3

list of error that i found

  • Cannot read property 'controls' of null
  • Cannot read property 'valueChanges' of null
  • Cannot read property 'setValue' of null
  • Cannot read property 'value' of null
  • Cannot find control with name
  • Cannot read property 'length' of null (FormArray)

Affected Package

i think it should be @angular/forms

Description

A clear and concise description of the problem...
TypeError: Cannot read property 'valueChanges' of null
    at FormPaymentVoucherComponent.push../src/app/purchase/payment-voucher/form-payment-voucher/form-payment-voucher.component.ts.FormPaymentVoucherComponent.initForm (form-payment-voucher.component.ts:193)
    at FormPaymentVoucherComponent.push../src/app/component/base-form/base-form.component.ts.BaseFormComponent.ngOnInit (base-form.component.ts:36)
    at FormPaymentVoucherComponent.push../src/app/purchase/shared/base-purchase-form/base-purchase-form.component.ts.BasePurchaseFormComponent.ngOnInit (base-purchase-form.component.ts:49)
    at FormPaymentVoucherComponent.push../src/app/purchase/payment-voucher/form-payment-voucher/form-payment-voucher.component.ts.FormPaymentVoucherComponent.ngOnInit (form-payment-voucher.component.ts:99)
    at checkAndUpdateDirectiveInline (core.js:21096)
    at checkAndUpdateNodeInline (core.js:29494)
    at checkAndUpdateNode (core.js:29456)
    at debugCheckAndUpdateNode (core.js:30090)
    at debugCheckDirectivesFn (core.js:30050)
    at Object.eval [as updateDirectives] (FormPurchaseComponent.html:256)


聽 | push../src/app/shared/error-handler.ts.RavenErrorHandler.handleError | @ | error-handler.ts:110
-- | -- | -- | --
聽 | (anonymous) | @ | core.js:27136
聽 | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:391
聽 | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:150
聽 | push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular | @ | core.js:26214
聽 | push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick | @ | core.js:27136
聽 | (anonymous) | @ | core.js:26997
聽 | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:391
聽 | onInvoke | @ | core.js:26255
聽 | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:390
聽 | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:150
聽 | push../node_modules/@angular/core/fesm5/core.js.NgZone.run | @ | core.js:26169
聽 | next | @ | core.js:26997
聽 | schedulerFn | @ | core.js:23734
聽 | push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub | @ | Subscriber.js:192
聽 | push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next | @ | Subscriber.js:130
聽 | push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next | @ | Subscriber.js:76
聽 | push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next | @ | Subscriber.js:53
聽 | push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next | @ | Subject.js:47
聽 | push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit | @ | core.js:23718
聽 | checkStable | @ | core.js:26224
聽 | onHasTask | @ | core.js:26268
聽 | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask | @ | zone.js:443
聽 | push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount | @ | zone.js:463
聽 | push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount | @ | zone.js:291
聽 | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:212
聽 | drainMicroTaskQueue | @ | zone.js:601
聽 | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:502
聽 | invokeTask | @ | zone.js:1693
聽 | globalZoneAwareCallback | @ | zone.js:1719

馃實 Your Environment

Node: 10.19.0
OS: linux x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.803.3
@angular-devkit/build-optimizer   0.803.3
@angular-devkit/build-webpack     0.803.3
@angular-devkit/core              8.3.3
@angular-devkit/schematics        8.3.3
@angular/cdk                      7.3.0
@angular/cli                      8.3.3
@ngtools/webpack                  8.3.3
@schematics/angular               8.3.3
@schematics/update                0.803.3
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?
i think this is browser specific issue. my issue tracker said this issue appear on

  • Chrome Version 80.0.3987.87 (Official Build) (64-bit) on Linux Mint 19 Cinnamon
  • Chrome 80.0.3987 on Windows 7,8,10
  • Chrome 81.0.4044 on Windows 7,10
  • Chrome Mobile 80.0.3987 on Android 10

i am not sure is this same issue with #35214 or not

@ngbot ngbot bot added this to the needsTriage milestone Feb 7, 2020
@michalma
Copy link

@michalma michalma commented Feb 7, 2020

I think it's the same issue like reported in #35214. formGroup.get('foo') returns null randomly (but the field foo exists).

  • Angular 8.2.3
  • Chrome 80.0.3987
  • Windows 7,8,10
  • Mac OS X 10.15.1

Some of the errors i have:
Cannot read property 'valueChanges' of null
Cannot find control with name: 'foo'
Cannot find control with unspecified name attribute

@swftvsn
Copy link

@swftvsn swftvsn commented Feb 7, 2020

This is really serious bug and should be dealt with immediately.

@skyquartam
Copy link

@skyquartam skyquartam commented Feb 7, 2020

We have the same bug in Production site, Angular (and Material) v7, it happens only on Chrome 80

@gultyaev
Copy link

@gultyaev gultyaev commented Feb 7, 2020

Also have experienced this bug. By some reason it happens only once. If you can repeat the process after the error occurred it doesn't happen again.

@noobed7
Copy link

@noobed7 noobed7 commented Feb 7, 2020

It's a production show stopper for us at the moment. Could you give an ETA of any kind about chrome fix or an official work around?

@mix5003
Copy link
Author

@mix5003 mix5003 commented Feb 7, 2020

i found someone found relate bug in other issue #35190 (comment)

https://bugs.chromium.org/p/chromium/issues/detail?id=1049982

@swftvsn
Copy link

@swftvsn swftvsn commented Feb 7, 2020

so a quick fix would be to release a version of angular that does not use Array.reduce().

How long will it take for the chromium fix to trickle down for end users?

@sphela02
Copy link

@sphela02 sphela02 commented Feb 7, 2020

What if we replaced Array.prototype.reduce() with a function that didn't fail? Even if it was a bit slower.

@mix5003
Copy link
Author

@mix5003 mix5003 commented Feb 7, 2020

@sphela02 problem may solved. at least my sentry didn't report anything about this for 4 hours.

@shravan20084312
Copy link

@shravan20084312 shravan20084312 commented Feb 7, 2020

@sphela02 problem may solved. at least my sentry didn't report anything about this for 4 hours.

Was there any particular workaround applied? can you please share, if so.

@rodolfojnn
Copy link

@rodolfojnn rodolfojnn commented Feb 7, 2020

It was happening in Chrome Canary a few weeks ago, but I thought it was something related to that version

@mix5003
Copy link
Author

@mix5003 mix5003 commented Feb 7, 2020

@shravan20084312 it quick dirty fix so i just add this to main.ts

(function () {
  function getChromeVersion() {
    const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);

    return raw ? parseInt(raw[2], 10) : false;
  }

  const chromeVersion = getChromeVersion();
  if (chromeVersion && chromeVersion >= 80) {
    Array.prototype.reduce = function (callback /*, initialValue*/) {
      'use strict';
      if (this == null) {
        throw new TypeError('Array.prototype.reduce called on null or undefined');
      }
      if (typeof callback !== 'function') {
        throw new TypeError(callback + ' is not a function');
      }
      let t = Object(this), len = t.length >>> 0, k = 0, value;
      if (arguments.length === 2) {
        value = arguments[1];
      } else {
        while (k < len && !(k in t)) {
          k++;
        }
        if (k >= len) {
          throw new TypeError('Reduce of empty array with no initial value');
        }
        value = t[k++];
      }
      for (; k < len; k++) {
        if (k in t) {
          value = callback(value, t[k], k, t);
        }
      }
      return value;
    };
  }
})();

i grab this code from https://gist.github.com/lski/0eae0d2738831b6b0ec2b88a8a603952

@shravan20084312
Copy link

@shravan20084312 shravan20084312 commented Feb 7, 2020

@shravan20084312 it quick dirty fix so i just add this to main.ts

(function () {
  function getChromeVersion() {
    const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);

    return raw ? parseInt(raw[2], 10) : false;
  }

  const chromeVersion = getChromeVersion();
  if (chromeVersion && chromeVersion >= 80) {
    Array.prototype.reduce = function (callback /*, initialValue*/) {
      'use strict';
      if (this == null) {
        throw new TypeError('Array.prototype.reduce called on null or undefined');
      }
      if (typeof callback !== 'function') {
        throw new TypeError(callback + ' is not a function');
      }
      let t = Object(this), len = t.length >>> 0, k = 0, value;
      if (arguments.length === 2) {
        value = arguments[1];
      } else {
        while (k < len && !(k in t)) {
          k++;
        }
        if (k >= len) {
          throw new TypeError('Reduce of empty array with no initial value');
        }
        value = t[k++];
      }
      for (; k < len; k++) {
        if (k in t) {
          value = callback(value, t[k], k, t);
        }
      }
      return value;
    };
  }
})();

i grab this code from https://gist.github.com/lski/0eae0d2738831b6b0ec2b88a8a603952

As a workaround, we are seeing this to resolve the issue for now, until we get a stable fix from Angular/chrome.

@rodolfojnn
Copy link

@rodolfojnn rodolfojnn commented Feb 7, 2020

I麓m using this as a workaround from https://bugs.chromium.org/p/chromium/issues/detail?id=1049982

(function() {
  const arrayReduce = Array.prototype.reduce;
  let callback;
  Object.defineProperty(Array.prototype, 'reduce', {
    value: function(cb, ...args) {
    callback = cb;
      return arrayReduce.call(this, callback, ...args);
    }
  });
})();
@sphela02
Copy link

@sphela02 sphela02 commented Feb 7, 2020

It looks like @shravan20084312 might have done it more elegantly than us (s*he checks Chome version), but here's what we did.

We created this as a polyfill, and we're including it with our other polyfills.

Array.prototype.reduce = function(callback /*, initialValue*/) {
  'use strict';
  if (this === null) {
    throw new TypeError('Array.prototype.reduce called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var t = Object(this), len = t.length >>> 0, k = 0, value;
  if (arguments.length == 2) {
    value = arguments[1];
  } else {
    while (k < len && !(k in t)) {
      k++; 
    }
    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    value = t[k++];
  }
  for (; k < len; k++) {
    if (k in t) {
      value = callback(value, t[k], k, t);
    }
  }
  return value;
}; 

@shravan20084312
Copy link

@shravan20084312 shravan20084312 commented Feb 7, 2020

I麓m using this as a workaroung from https://bugs.chromium.org/p/chromium/issues/detail?id=1049982

(function() {
  const arrayReduce = Array.prototype.reduce;
  let callback;
  Object.defineProperty(Array.prototype, 'reduce', {
    value: function(cb, ...args) {
    callback = cb;
      return arrayReduce.call(this, callback, ...args);
    }
  });
})();

did this work as well @rodolfojnn

@jeroenheijmans
Copy link

@jeroenheijmans jeroenheijmans commented Feb 10, 2020

We've used the smaller version...

// TODO: Remove when things are fixed upstream (or in the browser?).
// Workaround for Angular issue: https://github.com/angular/angular/issues/35219
// and underlying Chromium bug:https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
(function () {
    const arrayReduce = Array.prototype.reduce;
    let callback;
    Object.defineProperty(Array.prototype, 'reduce', {
        value: function (cb, ...args) {
            callback = cb;
            return arrayReduce.call(this, callback, ...args);
        }
    });
})();

...and included it in polyfills.ts so that it works in both .spec.ts tests and in the browser. (Whereas main.ts didn't fix things in specs for us.)

@brunoesperanca
Copy link

@brunoesperanca brunoesperanca commented Feb 10, 2020

We've used the smaller version...

// TODO: Remove when things are fixed upstream (or in the browser?).
// Workaround for Angular issue: https://github.com/angular/angular/issues/35219
// and underlying Chromium bug:https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
(function () {
    const arrayReduce = Array.prototype.reduce;
    let callback;
    Object.defineProperty(Array.prototype, 'reduce', {
        value: function (cb, ...args) {
            callback = cb;
            return arrayReduce.call(this, callback, ...args);
        }
    });
})();

...and included it in polyfills.ts so that it works in both .spec.ts tests and in the browser. (Whereas main.ts didn't fix things in specs for us.)

Same answer as @rodolfojnn

@Nikitikitavi
Copy link

@Nikitikitavi Nikitikitavi commented Feb 11, 2020

Have same issue on my Angular8 app.

After including this to main.ts or to polyfills.ts

// TODO: Remove when things are fixed upstream (or in the browser?).
// Workaround for Angular issue: #35219
// and underlying Chromium bug:https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
(function () {
const arrayReduce = Array.prototype.reduce;
let callback;
Object.defineProperty(Array.prototype, 'reduce', {
value: function (cb, ...args) {
callback = cb;
return arrayReduce.call(this, callback, ...args);
}
});
})();

it fixes problem locally. But I still have it in prod build(
Can anyone advice what should be done to prevent it in prod?

@jeroenheijmans
Copy link

@jeroenheijmans jeroenheijmans commented Feb 11, 2020

@Nikitikitavi That should fix it in production too, at least it did for us, and given the general chatter around the issue it did so too for others I believe. Are you sure it's landing on your prod environment properly?

@jeroenheijmans
Copy link

@jeroenheijmans jeroenheijmans commented Feb 11, 2020

Also note that the Chromium team made this "priority 0" in the abovementiond Chromium bug 1049982. As I write this it seems the fixes have landed in Chrome Canary already, and if I understand that thread correctly they're also aiming to patch Chrome 80.

So the Angular team might not need to do anything (except for perhaps leaving this issue open for visibility, until the Chromium patch has landed properly in Chrome and Edge)...

@Nikitikitavi
Copy link

@Nikitikitavi Nikitikitavi commented Feb 11, 2020

@Nikitikitavi That should fix it in production too, at least it did for us, and given the general chatter around the issue it did so too for others I believe. Are you sure it's landing on your prod environment properly?

Yeah, I even found this code in my main-es2015.hash.js bundle file

@mix5003
Copy link
Author

@mix5003 mix5003 commented Feb 12, 2020

@Nikitikitavi i think user still use cached version or use version that before patched becuase browser already loaded before you deploy new version. so you need to find a way to make user refresh that page

@cexbrayat
Copy link
Contributor

@cexbrayat cexbrayat commented Feb 12, 2020

#35349 landed, so we'll have a new Angular patch version that we can use that does not rely on Array.reduce (while we are waitin for the next Chrome version that should fix the underlying issue).

@florentcm
Copy link

@florentcm florentcm commented Feb 13, 2020

A new chrome update, version 80.0.3987.106, seems to solve the issue.

@cexbrayat
Copy link
Contributor

@cexbrayat cexbrayat commented Feb 14, 2020

Closing, as v9.0.1 includes a fix, and the latest Chrome release does not have the underlying issue anymore.

@cexbrayat cexbrayat closed this Feb 14, 2020
@TheoLechemia
Copy link

@TheoLechemia TheoLechemia commented Feb 18, 2020

Is a patch is planned on Angular 7.X version ?

@SamVerschueren
Copy link
Contributor

@SamVerschueren SamVerschueren commented Feb 19, 2020

Is a patch is planned on Angular 7.X version ?

No, it will not be fixed in earlier versions #35349 (comment)

@mlc-mlapis
Copy link

@mlc-mlapis mlc-mlapis commented Feb 19, 2020

@TheoLechemia Since Chrome 80.0.3987.106 the bug has been eliminated.

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Mar 21, 2020

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can鈥檛 perform that action at this time.