Angular Universal: HTMLElement is not defined

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Description

Using Angular Elements (specifically createCustomElement) breaks SSR.

🔬 Minimal Reproduction

Here’s a repository that reproduces the issue: https://github.com/juristr/repro-angular-elements-with-ssr-issue

It’s a newly generated Angular CLI app + with SSR using @nguniversal/hapi-engine.

This commit works 96f5ed9fc5f40ab61be09854200ff404090698e1, but once I add @angular/elements it breaks.

🔥 Exception or Error

/Users/.../ngssr/dist/ngssr/server/main.js:55010
class NgElement extends HTMLElement {
                        ^

ReferenceError: HTMLElement is not defined
    at Module.Dti6 (/Users/.../ngssr/dist/ngssr/server/main.js:55010:25)
    at __webpack_require__ (/Users/.../ngssr/dist/ngssr/server/main.js:20:30)
    at Module.ZAI4 (/Users/.../ngssr/dist/ngssr/server/main.js:78554:75)
    at __webpack_require__ (/Users/.../ngssr/dist/ngssr/server/main.js:20:30)
    at Module.24aS (/Users/.../ngssr/dist/ngssr/server/main.js:38572:69)
    at __webpack_require__ (/Users/.../ngssr/dist/ngssr/server/main.js:20:30)
    at Module.K011 (/Users/.../ngssr/dist/ngssr/server/main.js:61050:80)
    at __webpack_require__ (/Users/.../ngssr/dist/ngssr/server/main.js:20:30)
    at Module.uj+Y (/Users/.../ngssr/dist/ngssr/server/main.js:155539:74)
    at __webpack_require__ (/Users/.../ngssr/dist/ngssr/server/main.js:20:30)

A server error has occurred.

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.2
Node: 12.14.0
OS: darwin x64

Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.2
@angular-devkit/build-angular   0.1100.2
@angular-devkit/core            11.0.2
@angular-devkit/schematics      11.0.2
@nguniversal/builders           11.0.0
@nguniversal/hapi-engine        11.0.0
@schematics/angular             11.0.2
@schematics/update              0.1100.2
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

Related:

• https://github.com/angularathens/2nd-workshop-angular-contrib/issues/10#issuecomment-735907510
• https://github.com/angular/angular/issues/24551
• https://github.com/angular/angular/pull/37799

[alan-agius4]

@gkalpak, I think this can be closed now.

[gkalpak]

A little update:

Since #39994 is a breaking change, we are investigating other (non-breaking) solutions, such as assigning domino.impl onto global sooner. For reference, this assignment currently happens in the setDomTypes() function, which is called in a PLATFORM_INITIALIZER.

In the meantime, a simple work-around is to manually load domino sooner:

1. Create a src/app/load-domino.server.ts file with the following content:

   Object.assign(global, require('domino').impl);
   

2. At the top of src/main.server.ts (before the app/server.module.ts import) add an import to the previous file:

   // This import must come before any imports that would (directly or transitively)
   // import `@angular/elements`, which rely on DOM built-ins being available.
   import './load-domino.server';
   

_{UPDATE (2021-01-07): Changed suggestion to recommend importing in main.server.ts instead of app.server.module.ts.}