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. 批量导出docker images 的一个简单方法

    docker images |cut -c - |xargs docker save -o iamges.tar 主要 最大的长度不能超过 18 超过了就得改一下 -c 后面的数据长度 最终效果为: ...

  2. *【Python】【demo实验30】【练习实例】【使用Turtle实现实时时钟效果】

    目的: 使用Turtle实现实时时钟效果 源代码: # encoding=utf-8 # -*- coding: UTF-8 -*- import turtle from datetime impor ...

  3. 如何利用swoole搭建一個簡易聊天室

    <?php class Chat { const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问 const PART = 82;//端口号 private ...

  4. paramiko-ssh-实现操作记录查看

    在paramiko源码包中的demos目录下-> vim interactive.py

  5. 【IntelliJ IDEA】tomcat启动,打印日志乱码问题 【最新解决方法请看最后附录】

    刚开始给idea上配置了一个tomcat,然后跟着http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/theme-settings.h ...

  6. Vuex是什么?

    记得去年公司招聘前端工程师的时候,我要负责准备面试题去考验面试者,让我记忆深刻的有一件事,我看大多数面试者简历上都写了熟练掌握Vuex,然而当我问起的时候,大部分回答都支支吾吾,解释不清,而当我提起与 ...

  7. C#Linq之求和,平均值,最大值,最小值

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  8. windows server12 FTP 创建后常见问题

    一:用administrator 关闭防火墙可以访问,但是开启后不能访问 今天在windows server 2008 R2上安装了FTP,安装过程如下,然后添加内置防火墙设置,设置后发现本地可以访问 ...

  9. Laravel 查询或写入Enum字段出错的bug解决办法

    查询: if($request->filled('type')){ $where[] = ['type', strval(intval($request->input('type')))] ...

  10. vuex中的this.$store.commit

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...