{"id":2361,"date":"2019-04-03T14:49:23","date_gmt":"2019-04-03T12:49:23","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2361"},"modified":"2019-04-03T14:49:23","modified_gmt":"2019-04-03T12:49:23","slug":"angular-elements-part-ii","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/","title":{"rendered":"Angular Elements, Part II"},"content":{"rendered":"<div class=\"article\">\n<hr>\n<div style=\"font-size:14px\">\n<b style=\"font-weight: bold\">This blog post is part of an article series.<\/b><\/p>\n<ul class=\"toc\">\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/13\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx\">Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web Components<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/29\/angular-elements-part-ii-lazy-and-external-web-components.aspx\">Angular Elements, Part II: Lazy And External Web Components<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/06\/angular-elements-without-zone-js.aspx\">Angular Elements, Part III: Angular Elements without Zone.js<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/10\/31\/content-projection-with-slots-in-angular-elements-7.aspx\" target=\"_blank\" rel=\"noopener\">Angular Elements, Part IV:&nbsp;Content Projection with Slots in Angular Elements (&gt;=7)<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2019\/01\/27\/building-angular-elements-with-the-cli.aspx\">Angular Elements, Part V: Your Options For Building Angular Elements With The CLI<\/a><\/li>\n<\/ul>\n<\/div>\n<hr>\n<p>In the <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/13\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx\">first part of this series<\/a>, I've shown how to leverage Angular Elements for dynamically adding components to a page. The discussed example dynamically adds tiles to a dashboard.<\/p>\n<p>In this article, I'm going one step further: I'll extend the shown example by loading the Web Components on demand. For this, I demonstrate two approaches: Lazy Loading and loading external components.<\/p>\n<p>The <a href=\"https:\/\/github.com\/manfredsteyer\/angular-elements-dashboard\">solution<\/a> can be found in my <a href=\"https:\/\/github.com\/manfredsteyer\/angular-elements-dashboard\">GitHub repo<\/a>.<\/p>\n<h2 id=\"lazy-loading-vs-loading-external-components\">Lazy Loading vs. Loading External Components<\/h2>\n<p>Perhaps you are wondering what the differences between to two outlined approaches -- lazy loading and loading external components -- are.<\/p>\n<p>Lazy Loading demands on compiling the component and its hosting application together. This allows for optimizations like tree shaking but also limits your possibilities as the application needs to know all possible web components in advance. It's more or less like what you know from the first article. In addition, you have to leverage Angular's and the CLI's features for code splitting and lazy loading.<\/p>\n<p>On the other side, you could also put your web component and all libraries it depends on -- like <code>@angular\/core<\/code> or <code>@angular\/elements<\/code> -- into one self-contained bundle. After this, you can load this bundle in your host application. This increases bundle sizes but also gives you more flexibility as the host can dynamically load components not known at build time. The upcoming ngIvy compiler will help a lot with shrinking such bundles to a minimum. Also, my simple CLI extension <a href=\"https:\/\/www.npmjs.com\/package\/ngx-build-plus\">ngx-build-plus<\/a> allows to share common dependencies between different bundles. I will talk about those options in a later blog post.<\/p>\n<p>Of course, what I'm calling \"loading external components\" here, is also lazy loading. But as it is not the kind of lazy loading Angular provides out of the box, I've decided to use this paraphrase.<\/p>\n<h2 id=\"implementing-lazy-loading-without-the-router\">Implementing Lazy Loading (without the Router)<\/h2>\n<p>Lazy Loading is baked into Angular since its first days. There are low level APIs for it and the router provides a nice abstraction that makes this concept easy to use. However, in the example shown here, using the router is not beneficial because this is not about loading routes but loading some tiles into a dashboard on demand.<\/p>\n<p>That's why I'm leveraging a quite new feature the CLI provides since version 6. Using it, you can point to specific modules which are split off during bundling. After this, you can make use of the mentioned low level APIs to load those modules on demand.<\/p>\n<p>To get started, reference the module file(s) with your web components in your <code>angular.json<\/code>:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-string\">\"lazyModules\"<\/span>: [\n  <span class=\"hljs-string\">\"src\/app\/lazy-dashboard-tile\/lazy-dashboard-tile.module\"<\/span>\n],\n<\/div><\/code><\/pre>\n<p>The next listing shows how you can leverage the <code>NgModuleFactoryLoader<\/code> to load the bundle:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-meta\">@Injectable<\/span>({\n    providedIn: <span class=\"hljs-string\">'root'<\/span>\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> LazyDashboardTileService  {\n\n    <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\">\n        <span class=\"hljs-keyword\">private<\/span> loader: NgModuleFactoryLoader,\n        <span class=\"hljs-keyword\">private<\/span> injector: Injector\n    <\/span>) {\n    }\n\n    <span class=\"hljs-keyword\">private<\/span> moduleRef: NgModuleRef&lt;<span class=\"hljs-built_in\">any<\/span>&gt;;\n\n    load(): <span class=\"hljs-built_in\">Promise<\/span>&lt;<span class=\"hljs-built_in\">void<\/span>&gt; {\n\n        <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">this<\/span>.moduleRef) {\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-built_in\">Promise<\/span>.resolve();\n        }\n\n        <span class=\"hljs-keyword\">const<\/span> path = <span class=\"hljs-string\">'src\/app\/lazy-dashboard-tile\/lazy-dashboard-tile.module#LazyDashboardTileModule'<\/span>\n\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">this<\/span>\n            .loader\n            .load(path)\n            .then(<span class=\"hljs-function\"><span class=\"hljs-params\">moduleFactory<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">this<\/span>.moduleRef = moduleFactory.create(<span class=\"hljs-keyword\">this<\/span>.injector).instance;\n                <span class=\"hljs-built_in\">console<\/span>.debug(<span class=\"hljs-string\">'moduleRef'<\/span>, <span class=\"hljs-keyword\">this<\/span>.moduleRef);\n            })\n            .catch(<span class=\"hljs-function\"><span class=\"hljs-params\">err<\/span> =&gt;<\/span> {\n                <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">'error loading module'<\/span>, err); \n            });\n\n    }\n}\n<\/div><\/code><\/pre>\n<p>For the sake of simplicity, I'm not taking care of every possible race condition. As with the router, you have to provide a string with both, the filename of the module as well as the name of the module class. After loading it, you have to instantiate the module with <code>create<\/code>.<\/p>\n<p>After this, you could search this instance for components, services etc. However, this is not easy due to the lack of respective APIs. The good message is that you don't have to this when going with web components: As they directly register with the browser, all you need is to create html elements with the right names. For instance, the next listing creates a <code>lazy-dashboard-tile<\/code> element:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-keyword\">const<\/span> tile = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'lazy-dashboard-tile'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'class'<\/span>, <span class=\"hljs-string\">'col-lg-4 col-md-3 col-sm-2'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'a'<\/span>, <span class=\"hljs-string\">'100'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'b'<\/span>, <span class=\"hljs-string\">'50'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'c'<\/span>, <span class=\"hljs-string\">'25'<\/span>);\n\n<span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'content'<\/span>);\ncontent.appendChild(tile);\n<\/div><\/code><\/pre>\n<p>Also, you have to make sure that the web components are registered when the module is loaded. To achieve that, you could put the necessary code into the module's constructor:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-meta\">@NgModule<\/span>({\n  [\u2026],\n  declarations: [\n    [\u2026]\n    DashboardTileComponent\n  ],\n  entryComponents: [\n    DashboardTileComponent\n  ]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> DashboardModule { \n\n  <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private<\/span> injector: Injector<\/span>) {\n\n    <span class=\"hljs-keyword\">const<\/span> tileCE = createCustomElement(DashboardTileComponent, { injector: <span class=\"hljs-keyword\">this<\/span>.injector });\n    customElements.define(<span class=\"hljs-string\">'dashboard-tile'<\/span>, tileCE);\n\n  }\n\n}\n<\/div><\/code><\/pre>\n<p>Don't forget to put the component in question not only into the module's <code>declarations<\/code> section but also into its <code>entryComponents<\/code> array.<\/p>\n<h2 id=\"loading-external-components\">Loading External Components<\/h2>\n<p>For providing an external Web Component, you can just scaffold a new Angular application and make sure the Angular Element is registered when it starts up. For this, I'm using the <code>AppModule<\/code>'s <code>ngDoBootstrap<\/code> method:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-meta\">@NgModule<\/span>({\n   [\u2026],\n   declarations: [\n       ExternalDashboardTileComponent\n   ],\n   bootstrap: [],\n   entryComponents: [\n       ExternalDashboardTileComponent\n   ]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> AppModule { \n\n    <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private<\/span> injector: Injector<\/span>) {\n    }\n\n    ngDoBootstrap() {\n        <span class=\"hljs-keyword\">const<\/span> externalTileCE = createCustomElement(ExternalDashboardTileComponent, { injector: <span class=\"hljs-keyword\">this<\/span>.injector });\n        customElements.define(<span class=\"hljs-string\">'external-dashboard-tile'<\/span>, externalTileCE);\n    }\n\n}\n<\/div><\/code><\/pre>\n<p>Please also note that this example doesn't define an <code>bootstrap<\/code> component. The reason is, I don't want to load an Angular Component on startup but just register a web component. To test this component, just call the web component directly in your <code>index.html<\/code> and <code>ng serve<\/code> your project:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">external-dashboard-tile<\/span> <span class=\"hljs-attr\">a<\/span>=<span class=\"hljs-string\">\"50\"<\/span> <span class=\"hljs-attr\">b<\/span>=<span class=\"hljs-string\">\"60\"<\/span> <span class=\"hljs-attr\">c<\/span>=<span class=\"hljs-string\">\"70\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">external-dashboard-tile<\/span>&gt;<\/span>\n<\/div><\/code><\/pre>\n<p>For publishing our web components, we need one self-contained bundle that can be loaded into a host application. However, the current version of the CLI always creates several bundles. To solve this, we can use <a href=\"https:\/\/www.npmjs.com\/package\/ngx-build-plus\">ngx-build-plus<\/a> -- a simple extension for the CLI:<\/p>\n<pre><code>npm i ngx-build-plus --save-dev\n<\/code><\/pre>\n<p>After installing it, update your application's <code>builder<\/code> section within the <code>angular.json<\/code> file so that it points to <code>ngx-build-plus<\/code>:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-string\">\"builder\"<\/span>: <span class=\"hljs-string\">\"ngx-build-plus:build\"<\/span>,\n<\/div><\/code><\/pre>\n<p>Now, you can build your project using <code>ng build --project ... --single-bundle<\/code>. The new flag <code>single-bundle<\/code> which is provided by <code>ngx-build-plus<\/code>, makes sure you end up with one self-contained main bundle. In addition, you might also get other bundles, e. g. bundles with external scripts or polyfills. But everything you directly need to run your web component -- your code and the libraries it depends on -- ends up in the main bundle.<\/p>\n<p>In the example shown here, I'm using a build task in my <code>package.json<\/code> for coping over this bundle into the host's <code>assets<\/code> folder.<\/p>\n<p>To dynamically load the web component into the host, you just need some DOM manipulations to create a respective <code>script<\/code> tag as well as a tag for the component itself:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-comment\">\/\/ add script tag<\/span>\n<span class=\"hljs-keyword\">const<\/span> script = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'script'<\/span>);\nscript.src = <span class=\"hljs-string\">'assets\/external-dashboard-tile.bundle.js'<\/span>;\n<span class=\"hljs-built_in\">document<\/span>.body.appendChild(script);\n\n<span class=\"hljs-comment\">\/\/ add web component<\/span>\n<span class=\"hljs-keyword\">const<\/span> tile = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'dashboard-tile'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'class'<\/span>, <span class=\"hljs-string\">'col-lg-4 col-md-3 col-sm-2'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'a'<\/span>, <span class=\"hljs-string\">'100'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'b'<\/span>, <span class=\"hljs-string\">'50'<\/span>);\ntile.setAttribute(<span class=\"hljs-string\">'c'<\/span>, <span class=\"hljs-string\">'25'<\/span>);\n\n<span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'content'<\/span>);\ncontent.appendChild(tile);\n<\/div><\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lazy and External Web Components<\/p>\n","protected":false},"author":9,"featured_media":3026,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Elements, Part II - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Elements, Part II - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Lazy and External Web Components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-03T12:49:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"399\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Angular Elements, Part II\",\"datePublished\":\"2019-04-03T12:49:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\"},\"wordCount\":942,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\",\"name\":\"Angular Elements, Part II - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png\",\"datePublished\":\"2019-04-03T12:49:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png\",\"width\":600,\"height\":399},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Elements, Part II\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Elements, Part II - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/","og_locale":"en_US","og_type":"article","og_title":"Angular Elements, Part II - ANGULARarchitects","og_description":"Lazy and External Web Components","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/","og_site_name":"ANGULARarchitects","article_published_time":"2019-04-03T12:49:23+00:00","og_image":[{"width":600,"height":399,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png","type":"image\/png"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Angular Elements, Part II","datePublished":"2019-04-03T12:49:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/"},"wordCount":942,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/","name":"Angular Elements, Part II - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png","datePublished":"2019-04-03T12:49:23+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-elements-part-ii-lazy-and-external-web-components.png","width":600,"height":399},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-part-ii\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Angular Elements, Part II"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2361"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/3026"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}