npm run buil构建后页面白屏_构建微前端 Angular Elements

原文链接​itnext.io 原作者:Lionel Robbin​itnext.io

译者:

知乎用户​www.zhihu.com

现在，流行的单页面应用都在逐渐单片化，并使用服务端微服务架构。单片应用的思路逐渐壮大，非单片应用逐步被拆分为单片应用，并由多个不同的开发团队负责开发，这样的技术思路很先进但也增加了维护难度。 但大趋势是，将大型前端应用程序划分为多个微前端应用程序。通过这样的方式，不同的开发团队可以完全解耦自己负责自己的微前端应用即可，最终将这些微应用集成在一起提供给客户。

创建 Angular Elements

Angular elements 是 自定义 elements。Angular Elements 将 Angular component 打包在自定义的 elements 中并让其自启动（self-bootstrapping）。Angular Element 可以被包含在任何 web 应用中，用于创建可复用的微程序。

举个例子，作为 Demo 的产品管理原型应用使用 Angular Element 构建微前端的概念。应用的页面分为三个区域，每一个区域通过微前端应用渲染而成，并通过 custom elements 进行数据交换。

通过 Angular Element 创建微前端应用的方式是一致的，本文的源码地址放在本文的最后。

初始化项目

ng new product-view

使用正确的 polyfill 设置项目

npm install @webcomponents/custom-elements

创建组件

创建 Produc