Using Angular to create a Micro Frontend

Disclaimer

This article has been written with the help of the ModSquad Community. The related live session is available here:

Introduction to Web Components

Web components are a set of technologies, a meta- specification, with reusable isolated elements that make up a web application.

Basically, Web Components need 4 specifications:

• Custom Elements: A set of Javascript APIs to define the components and their behaviors.
• Shadow DOM: A set of APIs to render the element into a dedicated and isolated DOM.
• HTML Templates: Allows you to use <template> and <slot> tags to define a portion of HTML to reuse in which slots could be filled with variable content.
• ES Modules: A specification to import and use Javascript Modules to create an agnostic modular approach.

Modern Javascript frameworks offer some solutions to easily create a web component, using a custom element, leveraging all the framework features, and creating small business-oriented apps. This is what we call micro frontends.

Let’s see how to proceed using Angular and let’s see how to create our first micro frontend.

To continue, you need to have installed NodeJS (including npm) and the Angular CLI ```

bash
npm install -g @angular/cli

## Initiate the Project

Here we go. We are going to create our first web component using Angular. For this first exercise, let’s create a card to describe people in our community. We call it “social card”.

With your favorite terminal, create a new Angular project

bash
ng new social-card

## Create an Angular Component



1. Add Angular material

Because we want to use the Angular Material library to create our component, we need to add it as a dependency on our project. During the installation, I select the default values.

bash
ng add @angular/material

2. Create the Material Card Component

From the example section of the Card component, I choose to implement the “Card with multiple sections” one. [https://material.angular.io/components/card/examples](https://material.angular.io/components/card/examples)

First, I create a new Angular component. Please note “components” here refer to the [Angular Component](https://angular.io/api/core/Component), not Web Components defined in the introduction.

bash
ng generate component card

The Angular CLI automatically creates all the needed files and updates the different files to make the application work out of the box.

In the `src/app/card/` folder, open the HTML file and copy the following code into it:

html



John Doe
Dev Adcovate

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.

LIKE
SHARE

Then, open the CSS file and copy the following code:

css
.example-card {
max-width: 400px;
}
.example-header-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
}

3. Import Angular Material Modules in your App Module

Then, open the `src/app/app.module.ts` to import the `MatCardModule` and the `MatButtonModule`.

javascript
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';

javascript
imports: [
MatCardModule,
MatButtonModule

4. Run your application

Edit the `app.component.html` file from the `src/app` folder and replace the existing with the following:

html

You can start your application by running the following command at the project root level:

bash
ng serve

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nki33auo9odg6zwgex3g.png) 


So far, so good, but the following application is not yet a Web Component and we need to make some changes to transform it.


## Transform the Application into a Web Component



1. Add Angular elements dependency

Angular elements is the name in the Angular ecosystem for custom elements. This dependency allows us to easily create a custom element from our existing application.

bash
ng add @angular/elements

2. Update the app.module.ts

From the `src/app/app.module.ts` file, update the constructor, call the `createCustomElement()` method, and define the custom element tag, `ng-social-card`.

javascript
import {createCustomElement} from '@angular/elements';

javascript
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('ng-social-card', el);
}

ngDoBootstrap() {
}
}

Remove the AppComponent in the `bootstrap` array. we don’t need it anymore and it could generate errors in the console log.



3. Update the index.html

Open the src/.html file and change the content to use the custom-element instead of the initial value. \

html

We have now instantiated the application, using a custom element instead of the regular app-root tag.

Start the application again using `ng serve` and check that the application is still working.


## Build and Run Your Web Component


### Build it!

To build your component you have to run the following command:

bash
ng build

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eng0ryjvwh0yjpr73pvs.png)



A `dist` folder is now created containing an HTML file and all the Javascript and CSS files.

If you open the `index.html`, you can see it contains the custom elements previously defined.

html

NgSocialCard

### Run it!

To run it, you can install serve through npm to start a lightweight web server.

bash
npm install -g serve

And from the dist/ng-social-card folder, run the following command:

bash
serve

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94sppuvovadrvqo2huxh.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik0xcy8zkzsvf462m5vt.png)



**Congratulations! You’ve just created your first micro frontend using Angular.**


## Resources

All the code is available at the repository: [https://github.com/avdev4j/ng-social-card](https://github.com/avdev4j/ng-social-card)

Find more micro frontends videos on our YouTube channel: [https://www.youtube.com/c/EntandoVideos](https://www.youtube.com/c/EntandoVideos)

Join us on Discord to share and learn about Composable apps: [https://discord.gg/SdMCvyzzHm](https://discord.gg/SdMCvyzzHm)