angular: Type 'SafeHtml' is not assignable to type 'string'

🐞 bug report

Affected Package

The issue is caused by package @angular/platform-browser

Is this a regression?

This is kind of regression - please see description bellow.

Description

I am getting Typescript error after switching to Ivy compiler:

[Step 4/5] src/app/app.component.html(1,26): Type 'SafeHtml' is not assignable to type 'string'.

In Angular class there is a member property declared as SafeHtml:

@Component({
  selector: 'app',
  template: `<div [innerHTML]="description"></div>`
})
export class AppComponent {
  description: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}
  
  ngOnInit(): void {
    this.description = this.sanitizer.sanitize(SecurityContext.HTML, '<strong>whatever comes from server</strong>');
  }
}

My issue is how to convert SafeHtml and SafeUrl to string, so that strict template check does not emits an error - I would like to avoid calling .toString() on the description - it should work out of the box - at least it is my expectation.

Angular SafeHtml is declared as:

/**
 * Marker interface for a value that's safe to use as HTML.
 *
 * @publicApi
 */
export declare interface SafeHtml extends SafeValue {
}

And innerHtml defined in lib.dom.d.ts:

interface InnerHTML {
    innerHTML: string;
}

The innerHtml is type of string, whereas I have SafeHtml.

🔬 Minimal Reproduction

How to reproduce:

git clone https://github.com/felikf/angular-repro-safe-html.git
npm i
npm run build

🔥 Exception or Error


Type 'SafeHtml' is not assignable to type 'string'

🌍 Your Environment

Angular Version:


Angular CLI: 8.3.4
Node: 12.11.1
OS: win32 x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.4
@angular-devkit/build-angular      0.803.6
@angular-devkit/build-optimizer    0.803.6
@angular-devkit/build-webpack      0.803.6
@angular-devkit/core               8.3.4
@angular-devkit/schematics         8.3.4
@angular/cdk                       8.2.0
@angular/cli                       8.3.4
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.0
@angular/material-moment-adapter   8.2.0
@ngtools/webpack                   8.3.6
@schematics/angular                8.3.4
@schematics/update                 0.803.4
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

Anything else relevant? This happens during npm run build.

Also asked here: https://stackoverflow.com/questions/58265539/angular-ivy-type-check-type-safehtml-is-not-assignable-to-type-string

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 11
  • Comments: 16 (6 by maintainers)

Most upvoted comments

just use as string after sanitize

This is incorrect. This is still an issue

I believe this issue no longer is. I can’t reproduce it.

@virgile-hogman sorry, disregard, got my threads mixed up

A workaround is to cast description in your template via $any.

I agree, this is a bug and something we should address.

One interesting idea would be to modify the type of SafeHtml during the type-checking pass to be string directly…

@felikf thanks, that one is known. You can find more info in #30080.

@felikf Thanks for reporting, that’s an interesting and valid case we didn’t consider for the template type checker!