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. hive的hiveserver2模式启动不起来,发现Hadoop一直处于安全模式

    hive的hiveserver2模式启动不起来,发现Hadoop一直处于安全模式 命令介绍 命令hadoop fs –safemode get 查看安全模式状态 命令hadoop fs –safemo ...

  2. xml 表格

    设置单元格样式 <Style ss:ID="唯一id字符" ss:Name="单元格样式"> [内部通常用来设置 Alignment对齐.Font字 ...

  3. 一些基础的python小程序

    1.求下列数奇偶分数: list1 = [1,2,3,4,5,6,7,8,9,10] # 先创建两个空列表 jishu = [] oushu = [] # 使用for循环迭代list1一一取出进行判断 ...

  4. java进程CPU高分析

    JVM导致系统CPU高的常见场景: 内存不足,JVM gc频繁,一般会伴随OOMJVM某个线程死循环或者递归调用 定位和解决1.内存不足,gc频繁可参考我的这遍文章解决.https://blog.cs ...

  5. 使用tqdm实现下载文件进度条

    1.获取下载链接 下载链接为:http://fastsoft.onlinedown.net/down/Fcloudmusicsetup2.5.5.197764.exe 2.使用tqdm实现 2.1.从 ...

  6. Codeforces 1240B. Sequence Sorting

    传送门 分析题目发现如果把某个数 $x$ 往左移,那么之后所有小于 $x$ 的数也都要往左移 如果把 $x$ 往右移,那么之后所有大于 $x$ 的数也都要往右移 考虑我们首先一定有一个操作 $n$ 次 ...

  7. DVWA reCAPTCHA key: Missing

    修改dvwa文件夹下文件config.inc.php change: $_DVWA[ 'recaptcha_public_key' ] = ' '; $_DVWA[ 'recaptcha_privat ...

  8. std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

    std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

  9. Centos7:Solr4.10安装,配置与使用(tomcat环境)

    配置jdk环境,安装tomcat 解压solr bin:是脚本的启动目录 contrib:第三方包存放的目录 dist:编译打包后存放目录,即构建后的输出产物存放的目录 docs:solr文档的存放目 ...

  10. 帝国cms 修改分页样式

    帝国cms 修改分页样式(路径) /e/class/t_functions.php