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)
just use
as string
after sanitizeThis 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 bestring
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!