8

我正在尝试使用Angular Universal: SSRCustom 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是仅限浏览器的本机对象,并且由于它位于服务器端,因此无法引用仅限浏览器的本机对象?有解决办法吗?

4

1 回答 1

5

没错,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
}
于 2018-07-26T14:45:32.653 回答