0

I've just updated an application I'm working on from angular 11 to 12. (also updated typscript from 4.0.5 to 4.3.5). We noticed a difference in the application, when before I had an empty value I now get the text "null" in my application.

enter image description here

I've narrowed down where the problem occurs and it boils down to this: (I've hardcoded the null value for demo purpose)

<div>
  <span [innerHTML]="null | sanitizeHtml"></span>
</div>

The pipe code:

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

So the safeHtml object returned by the bypassSecurityTrustHtml seems to have changed, or the method has changed in dealing with a null value. Can anyone explain this behavior?

EDIT

A stackblitz for reproducing the issue: https://stackblitz.com/edit/angular-v12-ejwhmd?file=package.json

EDIT 2

Created a bug for angular https://github.com/angular/angular/issues/43794

JustinZ
  • 41
  • 5
  • 1
    not reproducible with information given (https://stackblitz.com/edit/angular-v12-ysfksi?file=src%2Fapp%2Fapp.component.ts). dom sanitizer handles null as it always did. something else in your code is converting it to a string before it reaches the pipe. – bryan60 Oct 07 '21 at 15:05
  • @bryan60 Well... as said, the problem showed after updating angular from 11 to 12. In your stackblitz you are using angular 10, so no then problem won't show. I will update the question with a stackblitz for reproducing. – JustinZ Oct 08 '21 at 07:05

1 Answers1

1

This question is answered in my bug issue (https://github.com/angular/angular/issues/43794).

Summary: most likely due to typesafety improvements null is no longer excpected in the method signature of the bypassSecurityTrustHtml. Therefore null is treated a bit different then before. It will now render like a text instead of actual null.

Workaround would be to address possible null values yourself before passing it to the bypassSecurityTrustHtml. https://stackblitz.com/edit/angular-v12-zn77kb?file=src%2Fapp%2Fapp.component.html

JustinZ
  • 41
  • 5