universal: [innerHTML] broken

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository’s issues are reserved for feature requests and bug reports. Also, Preboot has moved to https://github.com/angular/preboot - please make preboot-related issues there.

I’m submitting a …
bug report
What modules are related to this Issue?
universal
What is the current behavior?

[innerHTML] works fine on browser side, but does not render anything on the server.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

Only changes to app.ts compared to universal-starter repo

@Component({
  selector: 'home',
  template: '<h2 [innerHTML]="foo"></h2>'
})
export class Home {

  foo: any;

  constructor(private sanitizer: Sanitizer) {
    this.foo = this.sanitizer.sanitize(SecurityContext.HTML, 'Foobar');
  }
}

What is the expected behavior?

The universal app should render innerHTML. Instead, the h2 element is empty:

<app>
  <p>Hello Angular Universal App</p>
  <router-outlet></router-outlet>
  <home>
    <h2></h2>
  </home>
</app>

After browser has bootstrapped, the DOM is as follows:

<app>
  <p>Hello Angular Universal App</p>
  <router-outlet></router-outlet>
  <home>
    <h2>Foobar</h2>
  </home>
</app>

Please tell us about your environment:
Angular version: 2.0.0
angular-universal version: 2.0.11
Language: TypeScript 2.0.0
OS: Mac OS X
Platform: NodeJs

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 17 (7 by maintainers)

Most upvoted comments

We were all just talking about this one, this was fixed in the past, but it looks like it may be an Angular Core issue that’s causing it. Jeff was saying unfortunately most of the Core team is also @ the Connect conference so it may not be resolved until next week. Thanks for reporting the issue though!

MarkPieszak on Sep 27, 2016

I was having an issue with [innerHTML] not rendering on the server and can confirm it’s fixed in 2.1.0-rc.1

dottodot on Oct 18, 2016

@patrickmichalina this works great. thank you

stewones on Sep 28, 2017

@dottodot Strange that it is not working… but you can try this, moving your http request into the constructor, but am not so sure it will fix it:


export class PageComponent implements OnInit {
  public page$ = this.api
      .findOne(this.route.snapshot.url[0].path, {
        $select: {
          title: 1,
          body: 1,
          seo: 1
        }
      });
  constructor(private api: ApiService, private route: ActivatedRoute) {
    this.api.endpoint = 'page';
  }
}


<div *ngIf="page$ | async as page">
    <span [innerHtml]="page.body"></span>
 </div>

patrickmichalina on Aug 8, 2017