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. 从入门到自闭之Python--MySQL数据库安装

    分类: 关系型数据库:mysql oracle sqlserver sqllite 非关系型数据库:redis mongodb memcache hbase 安装: 网址:https://www.my ...

  2. tr、od命令

    一.tr:替换或删除字符 语法:       tr [OPTION] ... SET1 [SET2] 描述       翻译,压缩和/或删除标准输入中的字符,可写吗?       到标准输出. -c, ...

  3. Python链表操作(实现)

    Python链表操作 在Python开发的面试中,我们经常会遇到关于链表操作的问题.链表作为一个非常经典的无序列表结构,也是一个开发工程师必须掌握的数据结构之一.在本文中,我将针对链表本身的数据结构特 ...

  4. java——多线程知识点大总结

    1:理解线程的概念之前,我们有必要先理解一下进程的概念 程序(Program)是为实现特定目标或解决特定问题而用计算机语言(比如Java语言)编写的命令序列的集合. 进程指一个程序的一次执行过程   ...

  5. docker-compose.yml 部署Nginx、Java项目、MySQL、Redis

    version: "3.7" services: nginx: image: nginx restart: always container_name: nginx environ ...

  6. EF 查询扩展

    using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; using System.Da ...

  7. EasyUI_前台js_省市县三级联动

    1.html: <td class="tdl">所属城市</td> <td class="td_detail"> <i ...

  8. nop4.1用2008r2的数据库

    修改appsetting.json

  9. Nginx支持WebSocket服务

    server{ listen ; access_log logs/.jieyun.top.log main; server_name .jieyun.top; #绑定域名 index index.ph ...

  10. Js-声明变量

    JS声明变量 js声明变量的方式有3种:let,const,var 1.const如果定义简单数据类型,变成常量,变量值不可以更改. const name="lili"; name ...