angular - 如何使用 Angular 通用创建 Angular 自定义元素：SSR

Question

我正在尝试使用Angular Universal: SSR和Custom Elements创建一个 Angular 应用程序。

我下载了Angular Universal: SSR中可用的示例代码，并在AppModule的构造函数中为自定义元素添加了以下代码行

const ele = createCustomElement(AppComponent, {injector});
customElements.define('custom-ele', ele);

它构建得很好，但是当我尝试为它服务时，我收到以下错误

...universal\dist\server.js:66760
var elProto = Element.prototype;

ReferenceError: Element is not defined
at Object.<anonymous> (...universal\dist\server.js:66760:15)
at __webpack_require__ (...universal\dist\server.js:20:30)
....

是因为Element是仅限浏览器的本机对象，并且由于它位于服务器端，因此无法引用仅限浏览器的本机对象？有解决办法吗？

Answer 1

没错，Angular Universal 还不支持 Angular Elements。错误是由于此导入：

import {createCustomElement} from '@angular/elements';

同时，您可以使用一种解决方法，您可以通过 createCustomElement这种方式有条件地导入：

导入后只需声明require：

declare var require: any;

然后使用isPlatformBrowserfrom 的方法@angular/common只在客户端导入 createCustomElement：

if (isPlatformBrowser(platformId)) {
  const { createCustomElement } = require('@angular/elements');
  // you can use createCustomElement here
}