angular - 如何使用 Angular 通用创建 Angular 自定义元素:SSR
问题描述
我正在尝试使用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是仅限浏览器的本机对象,并且由于它位于服务器端,因此无法引用仅限浏览器的本机对象?有解决办法吗?
解决方案
没错,Angular Universal 还不支持 Angular Elements。错误是由于此导入:
import {createCustomElement} from '@angular/elements';
同时,您可以使用一种解决方法,您可以通过
createCustomElement
这种方式有条件地导入:
导入后只需声明require
:
declare var require: any;
然后使用isPlatformBrowser
from 的方法@angular/common
只在客户端导入 createCustomElement:
if (isPlatformBrowser(platformId)) {
const { createCustomElement } = require('@angular/elements');
// you can use createCustomElement here
}
推荐阅读
- python - Python-根据另一列的变化创建一个计数器列并重新启动计数器
- java - 使用 spring boot 石英创建表失败
- crossfilter - 是什么导致“未捕获 RangeError:超出最大调用堆栈大小”以及如何删除它?
- angular - 如何使用 Angular 7 从后端应用程序获取字符串响应
- laravel - spa应用程序错误返回状态码的最佳选择
- excel - 多个单元格的工作表宏
- react-native - React-Native MobX-State-Tree 存储在 registerComponent 上不可用
- java - 简单代码中的内存泄漏?在任何地方都找不到答案
- android - android分页库中Executor的真正用途是什么?
- scala - 如何在 Databricks 集群上执行 Intellij Spark 代码