# 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, which is the standard method starting with Entando 7.1.

Git-based bundles are also supported and to follow this tutorial in that format, see this Angular tutorial.

# 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 angular-widget

# Create the Angular MFE

  1. Navigate into the microfrontends directory:
cd microfrontends
  1. Install the Angular CLI:
npm install -g @angular/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

This is the expected output:

angular-widget
├── .angular
├── .vscode
├── node_modules
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   │
│   ├── assets
│   │   └── .gitkeep
│   │
│   ├── environment
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   │
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
│
├── .browserlistrc
├── .editorconfig
├── .gitignore
├── angular.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

# 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: [],
  entryComponents: [AppComponent]
})
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 />:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularWidget</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>
  <angular-widget />
</body>
</html>

  3. Go back to the bundle root directory

  4. Test run the Angular widget:

ent bundle run angular-widget

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.

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.

  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 YOUR-BUNDLE name to find your widget. It can also be found under User in the same sidebar.

  4. Drag and drop YOUR-BUNDLE into the Sample 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 →