With our micro frontend project ready, we need to prepare it to be consumed by another application. There are several ways to share micro frontends, from the simplest (and obsolete), with the use of iframes, to more modern, but complex, solutions such as module federation.
In this section, we will use an approach widely used in the market, which is the use of Web Components. Web Components is a specification that aims to standardize components created by different frameworks into a model that can be consumed between them. In other words, by creating an Angular component following this specification, an application created in React or Vue could consume this component. Although Web Components was not created with micro frontend projects in mind, we can see that its definition fits perfectly for what we need.
Like almost everything in the Angular framework, to create this type of component, we don’t need to do it manually, as the Angular team created a tool for this: Angular elements. An Angular element component is a common component but transpiled to the Web Components standard, packaging not only our code but also the Angular rendering engine, making it framework agnostic.
Let’s add it to our gym_exercises project on the command line of our operating system with the following command:
npm i @angular/elements
With the preceding command, we add the angular/elements dependency to our project, and to use it, we will make a change to the angular.json file:
{
“type”: “anyComponentStyle”,
“maximumWarning”: “50kb”,
“maximumError”: “50kb”
}
The component generated by Angular elements will encapsulate the Tailwind CSS framework, so we need to increase the component size budget a little to avoid errors when building the project.
The next change we must make is to the project’s main.ts file:
import {
bootstrapApplication,
createApplication,
} from ‘@angular/platform-browser’;
import { appConfig } from ‘./app/app.config’;
import { AppComponent } from ‘./app/app.component’;
import { createCustomElement } from ‘@angular/elements’;
(async () => {
const app = await createApplication(appConfig);
const element = createCustomElement(AppComponent, {
injector: app.injector,
});
customElements.define(‘exercise-form’, element);
})();
This file is responsible for configuring the initialization of an Angular project, and we normally do not change it as we want standard SPA build and execution behavior. However, here, we need to change it to inform Angular that the result of this project will be a web component generated by the Angular elements package. Here, we are configuring the project so that the application will generate a web component whose tag name will be exercise-form.
We now need to change the index.html file to understand this new tag so that we can render our micro frontend for testing:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>GymExercises</title>
<base href=”/” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<link rel=”icon” type=”image/x-icon” href=”favicon.ico” />
</head>
<body>
<exercise-form></exercise-form>
</body>
</html>
Here, we change the default <app-root> Angular component with the Web Components <exercise-form> tag. Our main application will be our micro frontend JavaScript, but the change to index.html will allow you and your team to maintain the micro frontend without needing to load the main project.
We now have a challenge in that, despite creating a web component, the project build is creating it in three files and with hashes, which is correct if our application is not a micro frontend, but in our case, we would like to have all the code in a single file and without the hash. We can do this manually, but the community has a package that automates this treatment: the ngx-build-plus package.
Let’s add it to the command line with the help of the Angular CLI:
ng add ngx-build-plus
To serve this micro frontend, we will use the http-server package, and add it with npm on the command line:
npm i http-server
Finally, let’s create some npm scripts to make running mfe easier. In the package.json file, we will make the following change:
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build –single-bundle –bundle-styles –keep-styles –output-hashing=none”,
“serve-mfe”: “http-server dist/gym_exercises”,
}
In the build script, we specify our intention to run it, resulting in a single generated file (–single-bundle). We also instruct it to retain and encapsulate the CSS (–bundle-styles –keep-styles) while ensuring that the generated file’s name does not include any type of hash (–output-hashing=none).
The serve-mfe script uses the http-server service to publish the contents of the dist folder that will contain the compiled micro frontend.
Let’s run our project with the following command and check the micro frontend we created:
npm run build
npm run serve-mfe
By accessing http://127.0.0.1:8080, we can see that our micro frontend application is being generated successfully.
With our micro frontend ready to be consumed, in the next section, we will consume it in the main application.
No Responses