# Create an Angular Micro Frontend

This tutorial describes the process of building an Angular widget on Entando. It creates a docker-based bundle using the ent bundle CLI tool.

# Prerequisites

# Initialize your Bundle Project

  1. To initialize your project, give it a name and build the scaffolding. This name will be used for the default bundle Docker image.
ent bundle init YOUR-BUNDLE
  1. Change to the bundle directory:
cd YOUR-BUNDLE
  1. Add the first MFE with the name angular-widget:
ent bundle mfe add --stack=angular angular-widget

# Create the Angular MFE

  1. Navigate into the microfrontends directory:
cd microfrontends
  1. Install the Angular CLI:
npm install -g @angular/cli@15.2.0

A specific version of the Angular CLI may be required to maintain compatibility with the Node version used by the ent cli.

  1. Generate a new Angular application:
ng new angular-widget
  1. Choose the following options:
? Would you like to add Angular routing? `No`
? Which stylesheet format would you like to use? `CSS`
  1. From the angular-widget directory, serve the application:
 cd angular-widget
 ng serve
  1. Access localhost:4200 to confirm the application is working. You should see a message similar to angular-widget app is running!

# Configure the Custom Element

Next, convert the Angular widget into a custom element, using Angular elements (opens new window) to transform components into custom elements.

  1. Install the Angular elements
ng add @angular/elements

Angular elements (opens new window) are Angular components packaged as custom elements, a web standard for defining new HTML elements independent of any framework.

WARNING

Install the Angular elements package using ng add (not with npm install as it runs additional steps behind the scenes).

  1. Open angular-widget/src/app/app.module.ts. Here's what the initial file looks like:

     import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

  2. Replace the entire file with:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: []
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('angular-widget', el);
  }
}

    In the original file, AppModule is bootstrapped directly during the application launch. In the updated file, the custom element is bootstrapped using the ngDoBootstrap() method (opens new window).

Custom Elements

# Test the Custom Element

  1. Open angular-widget/src/index.html.

  2. In the <body>, replace <app-root></app-root> with <angular-widget />:

    <body>
  <angular-widget />
</body>

  3. Test run the Angular widget:

ng serve

You should see a response after a few moments:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
  1. Open your browser at this location and see the Angular widget running. If you inspect the page, you should see the angular-widget element in the HTML.

Yay!

You now have an Angular micro frontend running.

# Build, Publish and Install the Bundle

# Build and Publish the Bundle

  1. Open entando.json in the bundle root folder and add the following under the angular-widget parameters.
"buildFolder": "dist/angular-widget"

  1. (Optional) Add a thumbnail JPEG or PNG file to the root bundle folder. It must be named thumbnail and not exceed 100kB, e.g. thumbnail.png.

  2. You can now build and install the bundle. See the Build and Publish tutorial for more details on the steps. 

    ent bundle pack
    ent bundle publish
    ent bundle deploy
    ent bundle install

  3. Log in to the App Builder and navigate to the Hub in the left nav to see the installed bundle.

# Add the Bundle to a Page

Let's see the Angular micro frontend in action on a page.

  1. In the App Builder, go to Page → Management

  2. Choose an existing page (or create a new one). Select Design from its Actions.

  3. In the Search field in the right sidebar, enter angular-widget. It can also be found under User at the bottom of the sidebar.

  4. Drag and drop the angular-widget into a frame in the main body of the page.

  5. Click Publish

  6. Click on View Published Page

Angular Micro Frontend

Congratulations!

You now have an Angular micro frontend running in Entando.

Next Steps

← Communication →