Angular 9 Elements：如何创建一个独立的WebComponent（具有所有依赖项）？
1Z10
我正在尝试基于带有Angular 9和WebComponents的Micro Frontends设计一个新的应用程序。我想通过WebComponents实现的主要目标是能够使不同的团队独立工作，随时随地部署其更新，并使主包装程序仅下载相应的自包含包并将其注入到包装页中。
就目前而言，我不需要处理不同的框架，但我只需要在它们之间的依赖关系非常低（每个WebComponent都应自己带来自己的依赖关系，允许使用Polyfills和Runtime除外）此刻）和部署（只需部署/暴露WebComponent捆绑包，然后通过GET API将其注入包装器中即可）。我想到的架构如下：
- UI：这是所有其他WebComponent的包装
- DashboardOne-UI：注册为WebComponent的仪表板
- DashboardTwo-UI：注册为WebComponent的仪表板
我在网上找到的WebComponents例子都是非常基本的。我的意思是他们只使用标准的html元素（按钮，段落等），因此没有依赖关系可以并入输出包中。就我而言，DashboardOne-UI依赖Prime-NG和Prime-Icons，我会避免在UI上也安装此类依赖项。
为了构建DashboardOne-UI并提供输出文件，我通过运行以下命令来使用NGX-Build-Plus和HTTP-Server：
"scripts": {
"start": "http-server dist/DashboardOne-UI/ --port 8084",
"build": "ng build --prod --single-bundle"
}
构建之后，dist文件夹包含：
这是index.html的内容：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OrganizationUI</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<organization-dashboard></organization-dashboard>
<script src="polyfills.js" defer></script>
<script src="scripts.js" defer></script>
<script src="polyfill-webcomp-es5.js" defer></script>
<script src="polyfill-webcomp.js" defer></script>
<script src="main.js" defer></script>
</body>
</html>
By running the start script I am able to get the WebComponent working as expected in the browser, but when I inject only the main.js script in the UI application it fails to get all the fonts and styles:
The only way I found to avoid having such dependencies on the wrapping UI, is to make the DashboardOne WebComponent'css point to the styles on NPM instead of local node_modules, by using:
@import url("https://unpkg.com/[email protected]/primeicons.css");
@import url("https://unpkg.com/[email protected]/resources/primeng.min.css");
@import url("https://unpkg.com/[email protected]/resources/themes/nova-light/theme.css");
@import url("https://unpkg.com/[email protected]/dist/css/bootstrap.min.css");
instead of:
@import url("~primeicons/primeicons.css");
@import url("~primeng/resources/primeng.min.css");
@import url("~primeng/resources/themes/nova-light/theme.css");
@import url("~bootstrap/dist/css/bootstrap.min.css");
这种方法的问题在于，我需要在两个地方处理css和package.json的依赖项。有没有更好的方法在Angular 9中构建自包含的WebComponents，例如，我只需要在包装UI应用程序中导入单个JS文件，而无需关心WebComponents的依赖关系？
1Z10
我刚刚发现，寻求更好解决方案的一种可能方法是提供
ng build
带有部署URL的路径（此处有更多信息）：
"scripts": {
"start": "http-server dist/DashboardOne-UI/ --port 8084",
"build": "ng build --single-bundle --deploy-url http://localhost:8084/"
}
通过这种方式，DashboardOne-UI Web组件元素一旦注入到UI包装器中，便指向其自己的服务器，在其中可以找到所有所需的资源。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
从一个Angular 9项目创建多个应用程序
- 2
Angular：在具有所有依赖项的组件中提供类
- 3
Angular 9有什么新功能？
- 4
带有@Injectable（）的Angular 9 BaseComponent
- 5
带有子入口点的Angular 9库循环依赖
- 6
Angular 9：无法创建新项目
- 7
有关测试Angular $ localize（Angular 9）的建议
- 8
具有多个条件和Angular 9的RxJS iif
- 9
Angular 9-具有Firebase和Cloud Firestore的后端
- 10
具有多个条件和Angular 9的RxJS iif
- 11
Angular 9-不是一个已知的元素
- 12
Angular如何支持Internet Explorer 9？
- 13
如何为Angular 8或9启用Ivy？
- 14
Angular 9如何停止查询参数编码
- 15
Angular 9：如何重新渲染组件
- 16
如何在Angular 9中导入所有Angular Material模块
- 17
如何获得有序的嵌套承诺Angular 9
- 18
如何在Angular 9项目中延迟加载HammerJS？
- 19
Angular 9如何删除具有用户指定索引范围的数组内的对象范围？
- 20
Angular 9-如何将2 http.get合并为一个Observable
- 21
带有Angular 9的摩纳哥编辑器未显示
- 22
Angular 9-父母内部有多个孩子
- 23
* ng如果带有按钮，则禁用或未禁用Angular 9
- 24
NgModel没有绑定在HTML中-Angular9
- 25
Angular 9退订NavigationEnd
- 26
更新到Angular 9
- 27
Firebase Angular9
- 28
Angular 9中的时区
- 29
Angular 9“错误：此构造函数与依赖注入不兼容。”
我来说两句