angular: Throw Node is not defined when server-side rendering

I’m submitting a…


[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When the server-side rendering progress wants to insert a piece of HTML text (like Hello <b>bro</b>!) into template with [innerHTML] but without sanitizer, the terminal throws error message like this: (browser rendering works normally)

ERROR ReferenceError: Node is not defined
    at isTemplateElement (.../dist-server/main.js:45681:28)
    at getTemplateContent (.../dist-server/main.js:45676:65)
    at Object._sanitizeHtml [as ɵ_sanitizeHtml] (.../dist-server/main.js:45668:28)
    at DomSanitizerImpl../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js.DomSanitizerImpl.sanitize (.../dist-server/main.js:66931:29)
    ...

Expected behavior

The server-side rendering progress should render safe HTML text directly, for the case that website always need to output some information with format.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Template:

<div class="index-quotename" [innerHTML]="item.name">
</div>

And the data fetched from Server is just like this

item.name = '<b>foo</b> bar'

BTW, I tried to import the Node modules exported from domino in main.js which server used to render the webpage, and everything works well.

Environment


Angular version: 6.0.0-rc.3


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version 11.2
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 9.8.0  
- Platform: Mac  

Others:

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 18
Comments: 19 (2 by maintainers)

Commits related to this issue

fix(ssr): temporary fix for issue #23280 (https://github.com/angular/angular/issues/23280) — committed to Willovent/blog.williamklein.info by Willovent 6 years ago
fix(platform-server): provide Domino DOM types globally Fixes #23280. This fix lets code acess DOM types like Node, HTMLElement in the code. These are invariant across requests and the corresponding... — committed to vikerman/angular by vikerman 6 years ago
fix(platform-server): provide Domino DOM types globally Fixes #23280, #23133. This fix lets code access DOM types like Node, HTMLElement in the code. These are invariant across requests and the corr... — committed to vikerman/angular by vikerman 6 years ago
fix(platform-server): provide Domino DOM types globally Fixes #23280, #23133. This fix lets code access DOM types like Node, HTMLElement in the code. These are invariant across requests and the corr... — committed to vikerman/angular by vikerman 6 years ago
fix(platform-server): provide Domino DOM types globally Fixes #23280, #23133. This fix lets code access DOM types like Node, HTMLElement in the code. These are invariant across requests and the corr... — committed to vikerman/angular by vikerman 6 years ago
fix(platform-server): provide Domino DOM types globally (#24116) Fixes #23280, #23133. This fix lets code access DOM types like Node, HTMLElement in the code. These are invariant across requests and... — committed to angular/angular by vikerman 6 years ago

Most upvoted comments

Looks like this was caused when the Sanitization code moved into core. There were some substantial changes that don’t appear to be isomorphic and only work in the browser. At first glance, this PR seems to be the culprit: https://github.com/angular/angular/pull/22540

justinappler on May 15, 2018

@vasyliv - A PR with the fix is in progress as updated in the bug here.

vikerman on May 29, 2018

Same in Angular 6.0.1

patrykp57 on May 14, 2018

Angular 6.0.4 is out with the fix! Woohoo!

kblestarge on Jun 6, 2018

// add to server.ts

function setDomTypes() {
  // Make all Domino types available as types in the global env.
  Object.assign(global, domino['impl']);
  (global as any)['KeyboardEvent'] = domino['impl'].Event;
}

setDomTypes();

This workaround from https://github.com/vikerman/angular/commit/534dfcbd76c6c40e4a7e4393fb1e01aeb4e6dcd6

Thanks @vikerman

alxpsr on Jun 4, 2018

@m98 It’ll be in the nest release which will be this week

Toxicable on Jun 4, 2018

Also in 6.0.0. This is really big issue because whole our website is depending on CMS content and should be released soon with SSR for google bots.

Any progress on this? Otherways i have to put everywhere html-safe pipe

vytautas-pranskunas- on May 9, 2018

domino is a server-side DOM implementation (this is a node-module, install it via npm and import to server.ts). There may be another solution, but i did it.

alxpsr on Jun 4, 2018

Anyone knows if I update Angular, this problem will be fixed or it’s still waiting to merge and update?

m98 on Jun 3, 2018

Are there any updates?

michael-vasyliv on May 28, 2018