Universal: [innerHTML] rendering

[joaogarin]

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.

• I'm submitting a ...
• [X] bug report
• What is the current behavior?

When using innerHTML the HTML Outputed in the server version of the page contains some incorrectly parsed HTML as it seems. (see pictures attached to this)

• 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.

Using [innnerHTML]="somebind_image" in my case the image url is as the one in the pictures attached. It contains some values attached to the image such as ?itok=jrRC-hU3”

• What is the expected behavior?

The image to be correctly parsed and displayed.

• Please tell us about your environment:
• Angular version: 2.0.0-beta.15
• Browser: [all]
• Language: [TypeScript 1.8.7]
• OS: [Mac OS X]
• Platform: [NodeJs]
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

The pictures attached show the incorrect parsed image html in the browser. Also the code where the image is being displayed in the template.

[wesleycho]

This might be a duplicate of #304

[jeffwhelpley]

After a flurry of updates to RC 1 this week, I re-tested this and it seems to be all good. Please re-try yourself and post here if you still have an issue.

[joaogarin]

Sure will do that! busy week yes!! congrats on the talk was awesome;)

[rjokelai]

With 2.0.0-rc.3 and universal 0.104.0 the issue seems to pop again. Running the latest universal-starter and adding a simple [innerHTML] there will reproduce the issue:

  <strong>Async data call return value:</strong>
  <pre>{{ data | json }}</pre>

  <div>
    <strong>InnerHTML</strong>
    <div [innerHTML]="innerHtml"></div>
  </div>

where innerHtml is:

innerHtml: string = '<span>Hello world!</span>';

produces output on server:

<div _ngcontent-xvi-1="" innerHTML="<span>Hello world!</span>"><span>Hello world!</span></div>

[jeffwhelpley]

@rjokelai maybe it is too early in the morning or something but I can't see where in your output the HTML is not correctly parsed. It looks like the innerHTML string you specify is put into the tag. What am I missing?

[rjokelai]

Actually, my bad. It seems that the innerHTML is working fine if there are no attribute quotes. If I put e.g. this.innerHtml = 'Hello <span lang="jp">世界</span>!'; then Chrome renders it server-side like this:

This is what the dev tools show

However, after the same script is run client-side the result is as following

The same works flawlessly if I leave the lang attribute out. It breaks even if I use lang='jp' or lang=jp without quotes altogether.

Furthermore, if I use undefined value for the innerHTML (e.g. when setting the value in setTimeout) it breaks with a TypeError: Cannot read property 'length' of null.

[jeffwhelpley]

Interesting. I will post this to the slack channel and see if someone can help debug this. Thanks for posting this info.

[joaogarin]

Yeah I have this also on my site if you open https://www.joaogarin.com/ you can see that the server rendered view has some weird places where content gets cut. I think the double quotes are the issue here.

Its using rc3 with universal 104

[manekinekko]

this seems to be related to angular core?! as you can see from my plunker (rc1) which doesnt use universal at all: http://plnkr.co/edit/cbXWpHtnbGHJQ0uCEPvC?p=preview

[PatrickJS]

can you try again with version 0.104.4 also the universal-starter has been updated with that version

[joaogarin]

Will give a shot at it as soon as possible.probably in the next days and will give some feedback here!

[PatrickJS]

thanks

[manekinekko]

0.104.4 seems to work.

[joaogarin]

Yep. Fixed in 104.4!Just tried it out now. Cool =)

[pitAlex]

This issue is back, the following code does not render on server-side:

@Comonent({
    'selector: 'main-page',
    'template' : '<section><h2 class="heading" [innerHTML]="heading"></h2></section>'
})
export class HomeComponentClass  {
    heading: string = 'Page Heading';
}

[scott-wyatt]

@pitAlex see https://github.com/angular/universal/pull/570

[angular-automatic-lock-bot[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._}