{"id":5184,"date":"2022-03-18T11:34:19","date_gmt":"2022-03-18T10:34:19","guid":{"rendered":"https:\/\/entando.com\/?p=5184"},"modified":"2024-11-12T16:46:15","modified_gmt":"2024-11-12T15:46:15","slug":"micro-frontend-angular-create-a-web-component","status":"publish","type":"post","link":"https:\/\/entando.com\/it\/microservices\/micro-frontend-angular-create-a-web-component\/","title":{"rendered":"Micro Frontend Angular: how to create a web component"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction to Web Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Web components are a set of technologies, a meta- specification, with reusable isolated elements<\/strong> that make up a web application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Basically, Web Components need <strong>4 specifications<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Custom Elements<\/strong>. A set of Javascript APIs to define the components and their behaviors;<\/li>\n\n\n\n<li><strong>Shadow DOM<\/strong>. A set of APIs to render the element into a dedicated and isolated DOM;<\/li>\n\n\n\n<li><strong>HTML Templates<\/strong>. Allows you to use &lt;template&gt; and &lt;slot&gt; tags to define a portion of HTML to reuse in which slots could be filled with variable content;<\/li>\n\n\n\n<li><strong>ES Modules<\/strong>. A specification to import and use Javascript Modules to create an agnostic modular approach.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modern Javascript frameworks offer some solutions to easily create a web component, using a custom element, leveraging all the framework features, and creating small business-oriented apps. This is what we call micro frontends.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s see <strong>how to proceed using Angular and let\u2019s see how to create our first micro frontend<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To continue, you need to have installed <a href=\"https:\/\/nodejs.org\/en\/\">NodeJS<\/a> (including npm) and the Angular CLI npm install -g @angular\/cli<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Initiate the Project using Angular to create a Micro Frontend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here we go. We are going to create our first web component using Angular. For this first exercise, <strong>let\u2019s create a card to describe people in our community<\/strong>. We call it a \u201csocial card\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With your favorite terminal, create a new Angular project:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Create an Angular Component<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add Angular material<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because <strong>we want to use the Angular Material library to create our component<\/strong>, we need to add it as a dependency on our project. During the installation, select the default values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ng add @angular\/material<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Create the Material Card Component<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the example section of the Card component, I choose to implement the \u201cCard with multiple sections\u201d one. <a href=\"https:\/\/material.angular.io\/components\/card\/examples\">https:\/\/material.angular.io\/components\/card\/examples<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, <strong>create a new Angular component<\/strong>. Please note \u201ccomponents\u201d here refer to the <a href=\"https:\/\/angular.io\/api\/core\/Component\">Angular Component<\/a>, not Web Components defined in the introduction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ng generate component card<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Angular CLI automatically creates all the needed files and updates the different files to make the application work out of the box.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the src\/app\/card\/ folder, open the HTML file and copy the following code into it:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;mat-card class=&#8221;example-card&#8221;&gt; &lt;mat-card-header&gt; &lt;div mat-card-avatar class=&#8221;example-header-image&#8221;&gt;&lt;\/div&gt; &lt;mat-card-title&gt;John Doe&lt;\/mat-card-title&gt; &lt;mat-card-subtitle&gt;Dev Adcovate&lt;\/mat-card-subtitle&gt; &lt;\/mat-card-header&gt; &lt;img mat-card-image src=&#8221;<a href=\"https:\/\/material.angular.io\/assets\/img\/examples\/shiba2.jpg&#038;#8221\" rel=\"nofollow\">https:\/\/material.angular.io\/assets\/img\/examples\/shiba2.jpg&#038;#8221<\/a>; alt=&#8221;Photo of a Shiba Inu&#8221;&gt; &lt;mat-card-content&gt; &lt;p&gt; The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting. &lt;\/p&gt; &lt;\/mat-card-content&gt; &lt;mat-card-actions&gt; &lt;button mat-button&gt;LIKE&lt;\/button&gt; &lt;button mat-button&gt;SHARE&lt;\/button&gt; &lt;\/mat-card-actions&gt; &lt;\/mat-card&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, open the CSS file and copy the following code:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.example-card { max-width: 400px; } .example-header-image { background-image: url(&#8216;<a href=\"https:\/\/material.angular.io\/assets\/img\/examples\/shiba1.jpg&#038;#8217\" rel=\"nofollow\">https:\/\/material.angular.io\/assets\/img\/examples\/shiba1.jpg&#038;#8217<\/a>;); background-size: cover; }<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Import Angular Material Modules in your App Module<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, <strong>open the src\/app\/app.module.ts to import the MatCardModule and the MatButtonModule<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">import {MatCardModule} from &#8216;@angular\/material\/card&#8217;; import {MatButtonModule} from &#8216;@angular\/material\/button&#8217;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">imports: [ MatCardModule, MatButtonModule<\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Run your application<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Edit the app.component.html file from the src\/app folder and replace the existing with the following:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;app-card&gt;&lt;\/app-card&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can start your application by running the following command at the project root level:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ng serve<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"615\" src=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular.webp?resize=642%2C615&#038;ssl=1\" alt=\"Create your first micro frontend Angular component using our guide. Leverage the power of web components and build modular apps.\" class=\"wp-image-5562\" srcset=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular.webp?w=642&amp;ssl=1 642w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular.webp?resize=300%2C287&amp;ssl=1 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So far, so good, but the following application is not yet a Web Component and we need to make some changes to transform it.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Transform the Application into a Web Component<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add Angular elements dependency<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Angular elements is the name in the Angular ecosystem for custom elements. <strong>This dependency allows us to easily create a custom element<\/strong> from our existing application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ng add @angular\/elements<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Update the app.module.ts<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the src\/app\/app.module.ts file, <strong>update the constructor<\/strong>, call the createCustomElement() method, <strong>and define the custom element tag, ng-social-card<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">import {createCustomElement} from &#8216;@angular\/elements&#8217;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">export class AppModule { constructor(private injector: Injector) { const el = createCustomElement(AppComponent, { injector }); customElements.define(&#8216;ng-social-card&#8217;, el); } ngDoBootstrap() { } }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Remove the AppComponent in the bootstrap array. We don\u2019t need it anymore and it could generate errors in the console log.<\/strong><\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Update the index.html<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the src\/index.html file and <strong>change the content to use the custom-element<\/strong> instead of the initial value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;body&gt; &lt;ng-social-card&gt;&lt;\/ng-social-card&gt; &lt;\/body&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>We have now instantiated the application<\/strong>, using a custom element instead of the regular app-root tag.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start the application again using ng serve and check that the application is still working.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>It&#8217;s time now to build and run your web component<\/strong>. To build your component you have to run the following command:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ng build<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"298\" src=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?resize=800%2C298&#038;ssl=1\" alt=\"Develop your first micro frontend Angular component using our guide.\" class=\"wp-image-5567\" srcset=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?resize=1024%2C382&amp;ssl=1 1024w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?resize=300%2C112&amp;ssl=1 300w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?resize=768%2C287&amp;ssl=1 768w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?resize=1536%2C574&amp;ssl=1 1536w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?w=1671&amp;ssl=1 1671w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_2.webp?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A dist folder is now created containing an HTML file and all the Javascript and CSS files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you open the index.html, you can see it contains the custom elements previously defined.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;head&gt; &lt;meta charset=&#8221;utf-8&#8243;&gt; &lt;title&gt;NgSocialCard&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt; &lt;ng-social-card&gt;&lt;\/ng-social-card&gt; &lt;script src=&#8221;runtime.6ef72ee47cb5bc7a.js&#8221; type=&#8221;module&#8221;&gt;&lt;\/script&gt; &lt;script src=&#8221;polyfills.41cc36d27639541d.js&#8221; type=&#8221;module&#8221;&gt;&lt;\/script&gt; &lt;script src=&#8221;main.8609c098aeba9ec8.js&#8221; type=&#8221;module&#8221;&gt;&lt;\/script&gt; &lt;\/body&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>To run it, you can install a server through npm to start a lightweight web server.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">npm install -g serve<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And from the dist\/ng-social-card folder, run the following command:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">serve<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"420\" src=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_3.webp?resize=800%2C420&#038;ssl=1\" alt=\"Create your first micro frontend Angular component using our guide.\" class=\"wp-image-5570\" srcset=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_3.webp?resize=1024%2C537&amp;ssl=1 1024w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_3.webp?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_3.webp?resize=768%2C403&amp;ssl=1 768w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_3.webp?w=1189&amp;ssl=1 1189w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The application is available at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"449\" height=\"612\" src=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_4.webp?resize=449%2C612&#038;ssl=1\" alt=\"Create your first micro frontend Angular component using our guide. Leverage the power of web components and build modular apps.\n\" class=\"wp-image-5573\" srcset=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_4.webp?w=449&amp;ssl=1 449w, https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/micro_frontend_angular_4.webp?resize=220%2C300&amp;ssl=1 220w\" sizes=\"auto, (max-width: 449px) 100vw, 449px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Congratulations! You\u2019ve just created your first micro frontend using Angular.<\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Discover more on our Resources<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">All the code is available at the repository: <a href=\"https:\/\/github.com\/avdev4j\/ng-social-card\">https:\/\/github.com\/avdev4j\/ng-social-card<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Find more micro frontends videos on our YouTube channel: <a href=\"https:\/\/www.youtube.com\/c\/EntandoVideos\">https:\/\/www.youtube.com\/c\/EntandoVideos<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Join us on Discord to share and learn about Composable apps: <a href=\"https:\/\/discord.gg\/SdMCvyzzHm\">https:\/\/discord.gg\/SdMCvyzzHm<\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Book your personalized Entando demo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The benefits of application composition and composable applications are numerous\u2014and Entando is the ACP that helps you see those benefits faster. Built on Kubernetes, Entando helps businesses <strong>address time-to-market pressure, simplify complex development processes, manage applications efficiently, and scale effortlessly.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See how with a personalized Entando demo, led by our enterprise application specialists.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-fill has-medium-font-size\"><a class=\"wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/entando.com\/demo-request\/\" style=\"border-radius:10px;background-color:#0050e5\">BOOK A DEMO<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to Web Components Web components are a set of technologies, a meta- specification, with reusable isolated elements that make up a web application. Basically, Web Components need 4 specifications: Modern Javascript frameworks offer some solutions to easily create a web component, using a custom element, leveraging all the framework features, and creating small business-oriented [&hellip;]<\/p>\n","protected":false},"author":249555087,"featured_media":5941,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637399],"tags":[],"class_list":["post-5184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microservizi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Micro Frontend Angular: create a web component | Entando<\/title>\n<meta name=\"description\" content=\"Create your first micro frontend Angular component with our step-by-step guide. Harness the power of web components to design flexible, modular applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/entando.com\/it\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro Frontend Angular: create a web component | Entando\" \/>\n<meta property=\"og:description\" content=\"Create your first micro frontend Angular component with our step-by-step guide. Harness the power of web components to design flexible, modular applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Entando\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-18T10:34:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-12T15:46:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Cristina Gianoli\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cristina Gianoli\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/\"},\"author\":{\"name\":\"Cristina Gianoli\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/person\\\/0eff70e91b0dba760ec671e8c17c0f02\"},\"headline\":\"Micro Frontend Angular: how to create a web component\",\"datePublished\":\"2022-03-18T10:34:19+00:00\",\"dateModified\":\"2024-11-12T15:46:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/\"},\"wordCount\":1110,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1\",\"articleSection\":[\"Microservizi\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/\",\"url\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/\",\"name\":\"Micro Frontend Angular: create a web component | Entando\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1\",\"datePublished\":\"2022-03-18T10:34:19+00:00\",\"dateModified\":\"2024-11-12T15:46:15+00:00\",\"description\":\"Create your first micro frontend Angular component with our step-by-step guide. Harness the power of web components to design flexible, modular applications.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1\",\"width\":1080,\"height\":1080,\"caption\":\"Create your first micro frontend Angular component using our guide. Leverage the power of web components and build modular apps.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/micro-frontend-angular-create-a-web-component\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Entando\",\"item\":\"https:\\\/\\\/entando.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Microservizi\",\"item\":\"https:\\\/\\\/entando.com\\\/it\\\/entando-insights\\\/microservizi\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Micro Frontend Angular: how to create a web component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/entando.com\\\/it\\\/\",\"name\":\"Entando\",\"description\":\"The Composable Way\",\"publisher\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/entando.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#organization\",\"name\":\"Entando\",\"url\":\"https:\\\/\\\/entando.com\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/staging-0f68-okdentando.wpcomstaging.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Entando_Logo-Blu.svg\",\"contentUrl\":\"https:\\\/\\\/staging-0f68-okdentando.wpcomstaging.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Entando_Logo-Blu.svg\",\"width\":178,\"height\":45,\"caption\":\"Entando\"},\"image\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/person\\\/0eff70e91b0dba760ec671e8c17c0f02\",\"name\":\"Cristina Gianoli\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g\",\"caption\":\"Cristina Gianoli\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Micro Frontend Angular: create a web component | Entando","description":"Create your first micro frontend Angular component with our step-by-step guide. Harness the power of web components to design flexible, modular applications.","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:\/\/entando.com\/it\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/","og_locale":"it_IT","og_type":"article","og_title":"Micro Frontend Angular: create a web component | Entando","og_description":"Create your first micro frontend Angular component with our step-by-step guide. Harness the power of web components to design flexible, modular applications.","og_url":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/","og_site_name":"Entando","article_published_time":"2022-03-18T10:34:19+00:00","article_modified_time":"2024-11-12T15:46:15+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1","type":"image\/webp"}],"author":"Cristina Gianoli","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Cristina Gianoli","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#article","isPartOf":{"@id":"https:\/\/entando.com\/it\/microservices\/micro-frontend-angular-create-a-web-component\/"},"author":{"name":"Cristina Gianoli","@id":"https:\/\/entando.com\/it\/#\/schema\/person\/0eff70e91b0dba760ec671e8c17c0f02"},"headline":"Micro Frontend Angular: how to create a web component","datePublished":"2022-03-18T10:34:19+00:00","dateModified":"2024-11-12T15:46:15+00:00","mainEntityOfPage":{"@id":"https:\/\/entando.com\/it\/microservices\/micro-frontend-angular-create-a-web-component\/"},"wordCount":1110,"commentCount":0,"publisher":{"@id":"https:\/\/entando.com\/it\/#organization"},"image":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1","articleSection":["Microservizi"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/entando.com\/it\/microservices\/micro-frontend-angular-create-a-web-component\/","url":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/","name":"Micro Frontend Angular: create a web component | Entando","isPartOf":{"@id":"https:\/\/entando.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#primaryimage"},"image":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1","datePublished":"2022-03-18T10:34:19+00:00","dateModified":"2024-11-12T15:46:15+00:00","description":"Create your first micro frontend Angular component with our step-by-step guide. Harness the power of web components to design flexible, modular applications.","breadcrumb":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#primaryimage","url":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1","contentUrl":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1","width":1080,"height":1080,"caption":"Create your first micro frontend Angular component using our guide. Leverage the power of web components and build modular apps."},{"@type":"BreadcrumbList","@id":"https:\/\/entando.com\/entando-insights\/microservices\/micro-frontend-angular-create-a-web-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Entando","item":"https:\/\/entando.com\/it\/"},{"@type":"ListItem","position":2,"name":"Microservizi","item":"https:\/\/entando.com\/it\/entando-insights\/microservizi\/"},{"@type":"ListItem","position":3,"name":"Micro Frontend Angular: how to create a web component"}]},{"@type":"WebSite","@id":"https:\/\/entando.com\/it\/#website","url":"https:\/\/entando.com\/it\/","name":"Entando","description":"The Composable Way","publisher":{"@id":"https:\/\/entando.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/entando.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/entando.com\/it\/#organization","name":"Entando","url":"https:\/\/entando.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/entando.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/staging-0f68-okdentando.wpcomstaging.com\/wp-content\/uploads\/2024\/06\/Entando_Logo-Blu.svg","contentUrl":"https:\/\/staging-0f68-okdentando.wpcomstaging.com\/wp-content\/uploads\/2024\/06\/Entando_Logo-Blu.svg","width":178,"height":45,"caption":"Entando"},"image":{"@id":"https:\/\/entando.com\/it\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/entando.com\/it\/#\/schema\/person\/0eff70e91b0dba760ec671e8c17c0f02","name":"Cristina Gianoli","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g","caption":"Cristina Gianoli"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/03\/Micro_Frontend_Angular_5.webp?fit=1080%2C1080&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pfHQCd-1lC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts\/5184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/users\/249555087"}],"replies":[{"embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/comments?post=5184"}],"version-history":[{"count":29,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts\/5184\/revisions"}],"predecessor-version":[{"id":6087,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts\/5184\/revisions\/6087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/media\/5941"}],"wp:attachment":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/media?parent=5184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/categories?post=5184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/tags?post=5184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}