AngularのSSRとcreateCustomElementによるエラー

サーバーサイドレンダリングとCustomElementのエラー

CustomElementは本来、ブラウザ側で機能するものです。
Angularでサーバーサイドレンダリングをする場合、サーバー側でcreateCustomElementの処理が定義されることで、以下のようなエラーが発生してしまいます。
Element(DOMによって定義されるもの)がサーバー側で定義されていないことが問題です。

var elProto = Element.prototype;
              ^

ReferenceError: Element is not defined
    at Object.<anonymous> (/user/apps/tests/universal-starter/dist/server.js:126911:15)
    at __webpack_require__ (/user/apps/tests/universal-starter/dist/server.js:20:30)
    at Object.@angular/elements (/user/apps/tests/universal-starter/dist/server.js:126796:18)
    at __webpack_require__ (/user/apps/tests/universal-starter/dist/server.js:126326:30)
    at Object../src/app/app.module.ts (/user/apps/tests/universal-starter/dist/server.js:126453:18)
    at __webpack_require__ (/user/apps/tests/universal-starter/dist/server.js:126326:30)
    at Object../src/app/app.server.module.ngfactory.js (/user/apps/tests/universal-starter/dist/server.js:126504:11)
    at __webpack_require__ (/user/apps/tests/universal-starter/dist/server.js:126326:30)
    at Object../src/main.server.ts (/user/apps/tests/universal-starter/dist/server.js:126712:37)
    at __webpack_require__ (/user/apps/tests/universal-starter/dist/server.js:126326:30)

解決方法

以下のように、クライアント側でのみcreateCustomElementが動作するようにすればエラーは避けられます。

constructor(private injector: Injector, @Inject(PLATFORM_ID) platformId: Object) {
    if (isPlatformBrowser(platformId)) {
      const { createCustomElement } = require('@angular/elements');

      // register the custom element with the browser.
      customElements.define(
        'app-calendar-breadcrumb',
        createCustomElement(CalendarBreadcrumbComponent, {injector: this.injector})
      );
    }
  }