[Angular 8] Take away: Web Components with Angular Elements: Beyond the Basics
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的更多相关文章
- 在angular项目中使用web-component ----How to use Web Components with Angular
原文: https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8 ------------- ...
- Web Components之Custom Elements
什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...
- The state of Web Components
Web Components have been on developers’ radars for quite some time now. They were first introduced b ...
- Angular JS | Closure | Google Web Toolkit | Dart | Polymer 概要汇集
AngularJS | Closure | Google Web Toolkit | Dart | Polymer GWT https://code.google.com/p/google-web-t ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- angular custom Element 自定义web component
angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...
- 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 ...
- Polymer——Web Components的未来
什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...
- 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见
http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...
随机推荐
- 批量导出docker images 的一个简单方法
docker images |cut -c - |xargs docker save -o iamges.tar 主要 最大的长度不能超过 18 超过了就得改一下 -c 后面的数据长度 最终效果为: ...
- *【Python】【demo实验30】【练习实例】【使用Turtle实现实时时钟效果】
目的: 使用Turtle实现实时时钟效果 源代码: # encoding=utf-8 # -*- coding: UTF-8 -*- import turtle from datetime impor ...
- 如何利用swoole搭建一個簡易聊天室
<?php class Chat { const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问 const PART = 82;//端口号 private ...
- paramiko-ssh-实现操作记录查看
在paramiko源码包中的demos目录下-> vim interactive.py
- 【IntelliJ IDEA】tomcat启动,打印日志乱码问题 【最新解决方法请看最后附录】
刚开始给idea上配置了一个tomcat,然后跟着http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/theme-settings.h ...
- Vuex是什么?
记得去年公司招聘前端工程师的时候,我要负责准备面试题去考验面试者,让我记忆深刻的有一件事,我看大多数面试者简历上都写了熟练掌握Vuex,然而当我问起的时候,大部分回答都支支吾吾,解释不清,而当我提起与 ...
- C#Linq之求和,平均值,最大值,最小值
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- windows server12 FTP 创建后常见问题
一:用administrator 关闭防火墙可以访问,但是开启后不能访问 今天在windows server 2008 R2上安装了FTP,安装过程如下,然后添加内置防火墙设置,设置后发现本地可以访问 ...
- Laravel 查询或写入Enum字段出错的bug解决办法
查询: if($request->filled('type')){ $where[] = ['type', strval(intval($request->input('type')))] ...
- vuex中的this.$store.commit
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...