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;

然后使用isPlatformBrowser中的@angular/common方法仅在客户端中导入createCustomElement：

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

如何使用Angular Universal创建Angular自定义元素：SSR

1 个答案: