How to implement micro front-end architecture with Angular?

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4pmT_Z4WJ3BRwSJOStY7sTwgPtFEcB4wfLwmha1O92VvVUgUmDHaHuHXXAG4XKPNRIXDaWwf1GO3w4D2hRo2OxmKjhv-pVXvCWc5RJd2Oi3ddRC-EqeBMpddInjhfXYD3GnanTtDB0gFkeYTjwz7gdqdwFHDdByCaoJIm7s6E2SIhCMZlFf3qhPk/s1421/micro-front-end-with-angular.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="791" data-original-width="1421" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4pmT_Z4WJ3BRwSJOStY7sTwgPtFEcB4wfLwmha1O92VvVUgUmDHaHuHXXAG4XKPNRIXDaWwf1GO3w4D2hRo2OxmKjhv-pVXvCWc5RJd2Oi3ddRC-EqeBMpddInjhfXYD3GnanTtDB0gFkeYTjwz7gdqdwFHDdByCaoJIm7s6E2SIhCMZlFf3qhPk/w640-h356/micro-front-end-with-angular.jpg" width="640" /></a></div><p style="text-align: justify;"><br /></p><p style="text-align: justify;"><span style="background-color: white; white-space: pre-wrap;"><span style="color: #202020; font-family: arial; font-size: medium;"><b>How to implement micro front-end architecture with Angular?</b></span></span></p><p style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Micro front-end is an architectural pattern where a single application is composed of smaller, independent and self-contained web applications. Each micro front-end is built and deployed independently, but they work together to create the overall user experience.</span></span></p><span style="font-family: arial; font-size: medium;"><div style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;">To implement micro front-end with Angular, you can follow these steps:</span></div><div style="text-align: justify;"><span style="color: #202020; white-space: pre-wrap;"><br /></span></div></span><ul style="text-align: left;"><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Break down your application into smaller, independent features, and create separate Angular applications for each feature.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Create a shared library or module that contains common functionalities such as authentication, authorization, and navigation.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Use a shared package manager like NPM or Yarn to share the common library or module across all the micro front-ends.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Use a framework or library like Webpack or SystemJS to bundle all the micro front-ends and their dependencies into a single, deployable artifact.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Use a container technology like Docker to deploy the micro front-ends independently.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Use a gateway or router to manage the routing and navigation between the micro front-ends.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Implement communication between the micro front-ends using standard web protocols like REST or GraphQL.</span></span></li><li style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;">Monitor the performance and scalability of the micro front-ends using tools like Kibana or Grafana.</span></span></li></ul><span style="font-family: arial; font-size: medium;"><div style="text-align: justify;"><span style="color: #202020; white-space: pre-wrap;"><br /></span></div><span style="background-color: white; color: #202020; white-space: pre-wrap;"><div style="text-align: justify;">By following these steps, you can create a scalable, modular, and maintainable micro front-end architecture using Angular.</div></span></span><div style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;"><span style="font-family: arial; font-size: medium;"><br /></span></span></div><div style="text-align: justify;"><span style="background-color: white; white-space: pre-wrap;"><span style="color: #202020; font-family: arial; font-size: medium;"><b>Micro front-end implementation example with Angular</b></span></span></div><div style="text-align: justify;"><span style="background-color: white; white-space: pre-wrap;"><span style="color: #202020; font-family: arial; font-size: medium;"><br /></span></span></div><div><div style="text-align: justify;"><span style="background-color: white; color: #202020; font-family: arial; font-size: medium; white-space: pre-wrap;">Let's say we have a hypothetical e-commerce application that has three main features: product listing, shopping cart, and checkout. We want to implement these features as independent micro front-ends.</span></div><span style="font-family: arial; font-size: medium;"><div style="text-align: justify;"><span style="color: #202020; white-space: pre-wrap;"><br /></span></div><span style="background-color: white; color: #202020; white-space: pre-wrap;"><div style="text-align: justify;"><b>Step 1: Create separate Angular applications for each feature</b></div></span><span style="background-color: white; color: #202020; white-space: pre-wrap;"><div style="text-align: justify;">We will create three separate Angular applications for each feature. To create a new Angular application, run the following command in the terminal:</div></span></span></div><div><span style="background-color: white; color: #202020; font-family: poppinsregular; font-size: 14px; white-space: pre-wrap;"><br /></span></div><div><pre style="background: black; color: #333333; font-size: 12px; overflow: auto; padding: 30px;"><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">ng </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">new</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> product-listing-app ng </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">new</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> shopping-cart-app ng </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">new</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> checkout-app</span></pre></div><div><span style="background-color: white; color: #202020; font-family: poppinsregular; font-size: 14px; white-space: pre-wrap;"><br /></span></div><div><div style="text-align: justify;"><b style="color: #202020; font-family: arial; font-size: large; white-space: pre-wrap;">Step 2: Create a shared library</b></div><span style="font-family: arial; font-size: medium;"><div style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;">We will create a shared library that contains common functionalities like authentication, authorization, and navigation. To create a shared library, run the following command in the terminal:</span></div></span></div><div><br /></div><div><pre style="background: black; color: #333333; font-size: 12px; overflow: auto; padding: 30px;"><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">ng generate library </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">shared</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">-</span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">lib</span></pre></div><div><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"><br /></span></div><div><div style="text-align: justify;"><b style="color: #202020; font-family: arial; font-size: large; white-space: pre-wrap;">Step 3: Share the shared library</b></div><span style="font-family: arial; font-size: medium;"><div style="text-align: justify;"><span style="background-color: white; color: #202020; white-space: pre-wrap;">We will share the shared library across all the micro front-ends using NPM. To do this, we will build the shared library and publish it to a private NPM registry</span><span style="background-color: white; color: #202020; white-space: pre-wrap;">, run the following command in the terminal:</span></div></span></div><div><br /></div><div><pre style="background: black; color: #333333; font-size: 12px; overflow: auto; padding: 30px;"><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">ng build </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">shared</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">-</span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">lib</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> npm login npm publish</span></pre></div><div><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;"><span style="background-color: white; color: #202020; font-family: poppinsregular; white-space: pre-wrap;"><b><br /></b></span></span></div><div><div style="text-align: justify;"><b style="color: #202020; font-family: arial; font-size: large; white-space: pre-wrap;">Step 4: Bundle the micro front-ends</b></div><span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3;"><div style="text-align: justify;"><span style="background-color: white; color: #202020; font-family: arial; font-size: medium; white-space: pre-wrap;">We will use Webpack to bundle all the micro front-ends and their dependencies into a single, deployable artifact. To do this, we will create a Webpack configuration file for each micro front-end. Here's an example of a Webpack configuration file for the product listing micro front-end:</span></div></span></div><div><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;"><span style="background-color: white; color: #202020; font-family: poppinsregular; white-space: pre-wrap;"><br /></span></span></div><div><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;"><pre style="background: black; color: #333333; font-size: 12px; overflow: auto; padding: 30px;"><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">const</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> path = </span><span class="hljs-built_in" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #e9950c; font-size: 14px;">require</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">(</span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'path'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">); </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">const</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> webpack = </span><span class="hljs-built_in" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #e9950c; font-size: 14px;">require</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">(</span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'webpack'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">); </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">const</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">HtmlWebpackPlugin</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> = </span><span class="hljs-built_in" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #e9950c; font-size: 14px;">require</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">(</span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'html-webpack-plugin'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">); </span><span class="hljs-variable language_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">module</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">.</span><span class="hljs-property" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: white; font-size: 14px;">exports</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> = { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">entry</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'./src/main.ts'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">output</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">path</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: path.</span><span class="hljs-title function_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">resolve</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">(__dirname, </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'dist'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">), </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">filename</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'product-listing-app.bundle.js'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> }, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">resolve</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">extensions</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: [</span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'.ts'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'.js'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">] }, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">module</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">rules</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: [ { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">test</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-regexp" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">/\.ts$/</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">loader</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'ts-loader'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } ] }, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">plugins</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: [ </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">new</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">HtmlWebpackPlugin</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">({ </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">template</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'./src/index.html'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> }), </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">new</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> webpack.</span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">ProvidePlugin</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">({ </span><span class="hljs-comment" color="rgba(255, 255, 255, 0.5)" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; font-size: 14px;">// global modules</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> }) ] };</span></pre></span></div><div><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;"><span style="background-color: white; color: #202020; font-family: poppinsregular; white-space: pre-wrap;"><br /></span></span></div><div><div style="text-align: justify;"><span style="background-color: white; color: #202020; font-family: arial; font-size: medium; white-space: pre-wrap;">We will create similar Webpack configuration files for the shopping cart and checkout micro front-ends.</span></div><span style="font-family: arial; font-size: medium;"><div style="text-align: justify;"><span style="color: #202020; white-space: pre-wrap;"><br /></span></div><span style="background-color: white; color: #202020; white-space: pre-wrap;"><div style="text-align: justify;"><b>Step 5: Deploy the micro front-ends</b></div></span><span style="background-color: white; color: #202020; white-space: pre-wrap;"><div style="text-align: justify;">We will use Docker to deploy the micro front-ends independently. To do this, we will create a Dockerfile for each micro front-end. Here's an example of a Dockerfile for the product listing micro front-end:</div></span></span></div><div><br /></div><div><span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box;"><pre style="background: black; color: #333333; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 12px; overflow: auto; padding: 30px;"><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">FROM</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> node:latest WORKDIR </span><span class="hljs-operator" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: white; font-size: 14px;">/</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">app </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">COPY</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> package</span><span class="hljs-operator" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: white; font-size: 14px;">*</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">.json .</span><span class="hljs-operator" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: white; font-size: 14px;">/</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> RUN npm install </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">COPY</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> . . RUN npm run build EXPOSE </span><span class="hljs-number" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">4200</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> CMD ["npm", "start"]</span></pre><div style="color: #2e95d3; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px;"><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;"><br /></span></div><div><div style="color: #2e95d3; text-align: justify;"><span style="background-color: white; color: #202020; font-family: arial; font-size: medium; white-space: pre-wrap;">We will create similar Dockerfiles for the shopping cart and checkout micro front-ends.</span></div><span class="hljs-keyword" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box;"><div style="text-align: justify;"><span style="color: #202020; font-family: arial; font-size: large; white-space: pre-wrap;"><br /></span></div><span style="color: #2e95d3; font-family: arial; font-size: medium;"><div style="text-align: justify;"><b style="color: #202020; white-space: pre-wrap;">Step 6: Manage routing and navigation</b></div><span style="background-color: white; color: #202020; white-space: pre-wrap;"><div style="text-align: justify;">We will use a gateway or router to manage the routing and navigation between the micro front-ends. To do this, we will create an Angular application that acts as a gateway to the micro front-ends. Here's an example of a routing module for the gateway application:</div></span></span></span></div><div style="color: #2e95d3; font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px;"><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;"><span style="background-color: white; color: #202020; font-family: poppinsregular; white-space: pre-wrap;"><br /></span></span></div><div style="font-family: "Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace;"><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box;"><pre style="background: black; overflow: auto; padding: 30px;"><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">import</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> { </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">NgModule</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">from</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'@angular/core'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">; </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">import</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> { </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">Routes</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">RouterModule</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">from</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'@angular/router'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">; </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">import</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> { </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">ProductListingComponent</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">from</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'product-listing-app'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">; </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">import</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> { </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">ShoppingCartComponent</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">from</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'shopping-cart-app'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">; </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">import</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> { </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">CheckoutComponent</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">from</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'checkout-app'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">; </span><span class="hljs-keyword" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #2e95d3; font-size: 14px;">const</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">routes</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">Routes</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> = [ { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">path</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'product-listing'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">component</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">ProductListingComponent</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> }, { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">path</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'shopping-cart'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">component</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">ShoppingCartComponent</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> }, { </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">path</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-string" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #00a67d; font-size: 14px;">'checkout'</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">, </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">component</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: </span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">CheckoutComponent</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;"> } ]; </span><span class="hljs-meta" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #ffe599; font-size: 14px;">@NgModule</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">({ </span><span class="hljs-attr" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #df3079; font-size: 14px;">imports</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">: [</span><span class="hljs-title class_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">RouterModule</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">.</span><span class="hljs-title function_" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #f22c3d; font-size: 14px;">forRoot</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">(routes)], </span><span class="hljs-built_in" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #e9950c; font-size: 14px;">exports: </span><span class="hljs-built_in" face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; font-size: 14px;"><span style="color: white;">[</span></span><span style="color: red;">RouterModule</span><span face=""Söhne Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace" style="color: white; font-size: 14px;">] )}</span></pre></span></div></span></div><div><span style="background-color: white; color: #202020; font-family: poppinsregular; font-size: 14px; white-space: pre-wrap;"><br /></span></div>

How to implement micro front-end architecture with Angular?

How to implement micro front-end architecture with Angular? Micro front-end is an architectural pattern where a single application is compo...

Read more »