[Ivy] ExpressionChangedAfterItHasBeenCheckedError when using bypassSecurityTrustStyle in a property getter

[fr0]

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Yes, it works in non-ivy mode

Description

A clear and concise description of the problem...

  <div [style.background-image]="iconSafe"></div>

   ...

  get iconSafe() {
    return this.sanitizer.bypassSecurityTrustStyle(`url(${this.icon})`);
  }

core.js:6047 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'SafeValue must use [property]=binding: url(https://i.imgur.com/4AiXzf8.jpg) (see http://g.co/ng/security#xss)'. Current value: 'SafeValue must use [property]=binding: url(https://i.imgur.com/4AiXzf8.jpg) (see http://g.co/ng/security#xss)'.

🔬 Minimal Reproduction

https://github.com/fr0/angular-ivy-test2

1. npm install
2. ng serve
3. open http://localhost:4200 and press F12, observe error in console

🔥 Exception or Error

core.js:6047 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'SafeValue must use [property]=binding: url(https://i.imgur.com/4AiXzf8.jpg) (see http://g.co/ng/security#xss)'. Current value: 'SafeValue must use [property]=binding: url(https://i.imgur.com/4AiXzf8.jpg) (see http://g.co/ng/security#xss)'.

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-next.16
Node: 12.12.0
OS: darwin x64
Angular: 9.0.0-next.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-next.16
@angular-devkit/build-angular     0.900.0-next.16
@angular-devkit/build-optimizer   0.900.0-next.16
@angular-devkit/build-webpack     0.900.0-next.16
@angular-devkit/core              9.0.0-next.16
@angular-devkit/schematics        9.0.0-next.16
@angular/cli                      9.0.0-next.16
@ngtools/webpack                  9.0.0-next.16
@schematics/angular               9.0.0-next.16
@schematics/update                0.900.0-next.16
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

[IgorMinar]

I was able to repro this with rc.1.

Oddly enough the error occurs with:

export class AppComponent {
  icon = 'https://i.imgur.com/4AiXzf8.jpg';

  get iconSafe() {
    return this.sanitizer.bypassSecurityTrustStyle(`url(${this.icon})`);
  }
  ...
}

But not with:

export class AppComponent {
  icon = 'https://i.imgur.com/4AiXzf8.jpg';
  iconSafe = this.sanitizer.bypassSecurityTrustStyle(`url(${this.icon})`);

  ...
}

This makes sense because the getter creates a new Safe value every time it's called.

With VE (ivyEnabled: false) the issue doesn't repro at all.

[IgorMinar]

I looked into this more and the behavior of VE is that if a bound value is of SafeStyle type we don't throw ExpressionChangedAfterItHasBeenCheckedError regardless of the contents of the SafeStyle values.

I don't think that this is ideal (we should really compare the wrapped value), but a good first step should be to match VE in this behavior and treat all SafeStyle values as equal for the purposes of ExpressionChangedAfterItHasBeenCheckedError.

[waterplea]

Isn't this expected though? This getter generates new object each change detection cycle. So when dev mode performs extra check — it does get a new object. Why wasn't it present with VE?

[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.}