This post is based on the NG-CONF talk, check the talk by yourself.

1. Dynamiclly add Angular Element into your application:

Once you have angular element, then inside your new application, you can use 'docuemnt.createElement' to add it:

2. Lazy loading Angular element

First Register module in angular.json:

Then load with NgModuleFactoryLoader:

3. External elements

If you have a project A with some custom elements you want to share with other project, it is possible to bundle project A and load with other projects.

The bundle size is huge, it is not a offical way. Not recommeded yet. The bundle will be servel files, you can use tool to concat into one bundle file: https://github.com/manfredsteyer/ngx-build-plus

[Angular 8] Take away: Web Components with Angular Elements: Beyond the Basics的更多相关文章

  1. 在angular项目中使用web-component ----How to use Web Components with Angular

    原文: https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8 ------------- ...

  2. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  3. The state of Web Components

    Web Components have been on developers’ radars for quite some time now. They were first introduced b ...

  4. Angular JS | Closure | Google Web Toolkit | Dart | Polymer 概要汇集

    AngularJS | Closure | Google Web Toolkit | Dart | Polymer GWT https://code.google.com/p/google-web-t ...

  5. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  6. angular custom Element 自定义web component

    angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...

  7. Angular 2 for 2017 web full stack development

    1 1 1 Angular 2 for 2017 web full stack development 1 1 https://angular2.xgqfrms.xyz/ https://ng2-he ...

  8. Polymer——Web Components的未来

    什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...

  9. 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见

    http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...

随机推荐

  1. 查找担保圈-step6-对被包含过的组进行清理,只保留未被包含过的组

    USE [test] GO /****** Object: StoredProcedure [dbo].[p04_get_groupno_cleared] Script Date: 2019/7/8 ...

  2. SQLite进阶-11.Join

    目录 JOIN 交叉连接 - CROSS JOIN 内连接 - INNER JOIN 外连接 - OUTER JOIN JOIN JOIN 子句用于结合两个或者多个数据表的数据,基于这些表之间的共同字 ...

  3. 【web性能优化】当用户输入网址后发生了什么?

    简单叙述 这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信.分层由 ...

  4. java实现spark常用算子之Repartitions

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  5. 01 Go之环境搭建

    1.1 Linux搭建Go环境 1.ssh远程登录Linux服务器,可选用iTerm.xshell ssh root@ip 2.建议配置好阿里云yum源.epel源 安装git yum install ...

  6. HttpClient的GET请求(post)请求

    一.不带参数的GET请求 // 创建Httpclient对象 CloseableHttpClient httpclient = HttpClients.createDefault(); // 创建ht ...

  7. latex中文环境配置(针对北大模板,开题报告+中期答辩+毕业论文)

    最近自己在忙着开题,中文环境真的是emm 以下只针对北大的毕业论文模板,至于其他的中文环境没有尝试 主要是用不同的latex编辑器会报不同的错误,当然我最后还是统一成了pdflatex,经过无数次尝试 ...

  8. java web中 8080端口号被占用的问题处理,终于明白了 Address already in use: JVM_Bind(端口冲突)

    1.错误描述 2011-7-20 11:05:18 org.apache.catalina.core.StandardServer await严重: StandardServer.await: cre ...

  9. docker 批量删除含有同样名字的images

    docker rmi --force $(docker images | grep doss-api | awk '{print $3}') docker rmi  $(docker images | ...

  10. linux之网络命令

    本文整理了在实践过程中使用的Linux网络工具,这些工具提供的功能非常强大,我们平时使用的只是冰山一角,比如lsof.ip.tcpdump.iptables等. 本文不会深入研究这些命令的强大用法,因 ...