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. Invoker(小DP)

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=6739 尽量让他们连起来. 思路: 直接dp,其中一个状态是以什么结尾. #define IOS ios_b ...

  2. python 文件写入

    def write_file(): """ 文件写入""" file_name = "wri2te_test.txt" ...

  3. pycharm虚拟环境的搭建

    目录 优点 windows 安装 配置虚拟环境管理器工作目录 MacOS.Linux 安装 工作文件 配置 使用 pycharm使用 新建项目 添加环境 使用环境 优点 1.使不同应用开发环境相互独立 ...

  4. kdress学习

    这两天看了一本书叫<linux二进制分析>,这里面提到的一个小工具kdress,这里分析一下 源码在:https://github.com/elfmaster/kdress kdress介 ...

  5. css多种方式实现等宽布局

    本文讲的等宽布局是在不手动设置元素宽度的情况下,使用纯css实现各个元素宽度都相当的效果. 1.使用table-cell实现(兼容ie8) <style> body,div{ margin ...

  6. Django入门:操作数据库(Model)

    Django-Model操作数据库(增删改查.连表结构) 一.数据库操作 1.创建model表         基本结构 1 2 3 4 5 6 from django.db import model ...

  7. Office/Visio/Project 2019 专业版iso

    一.Microsoft Office 2019专业增强版1.简体中文版Office Professional Plus 2019 (x86 and x64) – DVD (Chinese-Simpli ...

  8. SharePoint Resize app

    //Global Variables used in different functions. var widthSelected=null; var senderId; var hostUrl = ...

  9. $.ajax通用格式&&XMLHttpRequest对象属性和方法

    $.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, da ...

  10. 【js】clientY pageY screenY layerY offsetY的区别

    clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近 ...