p-button-label: Cannot set properties of null (setting 'textContent')

[psarno]

Edit: This is a regression in PrimeNG 14.2.1

I backed down the version of PrimeNG from 14.2.1 to 14.1.2 and the issue is resolved. The issue persists in 14.2.1.

Describe the bug

I recently upgraded to PrimeNG 14.2.1 and am now running into a strange issue where the call stack lands in PrimeNG code with the error:

Cannot set properties of null (setting 'textContent')

Unfortunately, I can't break this down into a reproducer. But I am unsure why PrimeNG is unable to find an element here.

This is a very large Angular application that has been in production for 2+ years without any issue. There have be no changes to the component where this is now failing (of course, the login component of all places).

The call stack shows:

TypeError: Cannot set properties of null (setting 'textContent')
at set label [as label] (vendor.js:279971:124)
at setInputsForProperty (vendor.js:212972:29)
at elementPropertyInternal (vendor.js:211973:5)
at ɵɵpropertyInterpolate1 (vendor.js:215917:5)
at Module.ɵɵpropertyInterpolate (vendor.js:215877:3)
at LoginComponent_Template (main.js:64351:76)

The actual line of code in vendor.js that is failing is:

    if (this.initialized) {
      primeng_dom__WEBPACK_IMPORTED_MODULE_1__.DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label;

      if (this.loading || this.icon) {
        this.setIconClass();
      }

      this.setStyleClass();
    }

The highest up I can find in the stack related to our code (main.js) shows it calling in after applying a pipe transform:

angular_core__WEBPACK_IMPORTED_MODULE_5_["ɵɵpropertyInterpolate"]("label", angular_core__WEBPACK_IMPORTED_MODULE_5_["ɵɵpipeBind1"](14, 34, "LOGIN.LOGIN_BUTTON"));

This compiled code corresponds with:

<button
  pButton
  type="submit"
  class="button p-button-lg"
  label="{{ 'LOGIN.LOGIN_BUTTON' | translate }}"
></button>

This is not an issue with the pipe transform, as it is used all over the system and works correctly.

In this case the login button remains functional but does not apply a label after throwing this error. The remainder of the system seems to be stable.

Again this is a new issue only after updating to the latest PrimeNG 14.2.1.

Environment

Version details below.

Reproducer

No response

Angular version

14.2.9

PrimeNG version

14.2.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.13.1

Browser(s)

No response

Steps to reproduce the behavior

I am unable to reduce this to a test case for StackBlitz but the call stack clearly shows this landing in PrimeNG code, where it is trying to set a property on a null object.

Expected behavior

This shouldn't be happening.

[mertsincan]

Thanks a lot for your report! This issue has been already fixed in #12172

Best Regards,