目前要嵌入 Angular 组件，需要进行三步操作：

  1. 对 Angular 组件进行改造，支持打包为 Web Component
  2. 在爱速搭应用设置中引入外部 JS/CSS
  3. 在页面编辑器中引入 Web Component 组件

下面具体说明每一步的操作

改造细节请参考，改造完后的 Angular 组件就能嵌入到任意页面中。

除了编译为 Web Component，在还有个需要注意的地方是 service 的调用，在普通 Angular 项目中数据请求一般是通过 service 实现的，UI 组件不关心，但打包成 Web Component 组件后无法修改内部实现，因此需要将 service 外部接口所需的配置也放在组件属性配置中，比如下面这个组件示例

数据获取接口是通过外部 ，组件本身并不知道数据是从哪获取的，这个组件打包成 Web Component 后，对外使用时就是下面的形式

    上面改造的要点是将 api 变成组件属性，这时使用组件就能通过如下形式，是的组件可以控制 api 来源

    1. <my-select api="http://xxx"></my-select>

    改造完成后续需要使用 npm run build 打包成 js 文件。

    打包完后，需要测试一下页面中放入该组件是否能正常运行，测试页面类似如下

    确认没问题后就可以进入下一步了

    经过前面的改造和编译后，一般会有如下文件产出（不同版本的 Angular 可能会有区别）：

    1. 3rdpartylicenses.txt
    3. index.html
    4. main-es2017.1a27f1fc3b52e01f2273.js
    5. polyfills-es2017.79d8baa3acf5316d4e1a.js
    7. runtime-es2017.3d14b3ad980d82585080.js
    8. runtime-es5.3d14b3ad980d82585080.js
    9. styles.5abc20b315a4b266fdb5.css

    将这几个文件上传到用户浏览器可以访问的 CDN 上。

    进入「应用设置」-「外链 JS/CSS」中，将这前面上传的文件地址添加进来，如图所示

    添加完后需要刷新页面才会生效。

    进入页面编辑器，在左侧组件列表中找到「Web Component」，添加到页面中，通过右侧属性面板修改它的标签及属性。

    这样就完成了 Angular 组件在页面中的显示。