Page Comparison

Micro frontends can be loaded into the shell application by the use of Webpack and Module federation. Micro frontends must be implemented as Web Components as this makes it possible to load micro frontends created in different frameworks into the shell app which is made in based on Angular.

Indholdsfortegnelse

...

[
  {
    "id": "careteam",
    "displayName": "Care teams",
    "iconName": "group",
    "route": "administration/careteam",
    "requiredRoles": ["Care Team Administrator"],
    "webComponentConfig": {
      "tag": "kam-mf-careteam",
      "url": ["http://localhost:3000/remoteEntry.js"],
      "exposedModule": "./WebComponentModule",
      "microFrontendName": "kamMfCareteam",
      "integrationType": "WEBCOMPONENT"
      "ecmaScriptModule": true
    }
  }
  ... // other micro frontends
]

...

• Id: unique ID for micro frontend

• displayName: The menu item name

• iconName: name of the icon (only support https://fonts.google.com/icons )

• route: URL path to the micro frontend in the shell application

• requiredRoles: the required role to access the micro frontend

• webComponentConfig:

  • tag: The HTML tag for the web component

  • url: Script file needed for the micro frontend

  • exposedModule: Name for module foderation federation in webpack.config file

  • microFrontendName: the unique name specified in webpack.config for module federation

  • ecmaScriptModule: Set to: true, if application emits EcmaScript modules.

The shell application dynamically generates the navigation menu based on the content of the configuration file. Which menu items will be available to a specific user is determined by the users' context and the required roles specified for the individual micro frontends.

...

• Wrapping the micro frontend in a Shadow DOM

• Prefixing all styles. In component-based frameworks, this could be achieved by using scoped styles in the root component (e.g. Scoped styles in Vue ).

• The last resort is removing global styles programmatically using the DOM API

• Using a framework that is not dependent and does not use global styles

The shell application is using Angular Material and as a consequence the styling theme specified in the shell is global and therefor will affect other Angular micro frontends using Angular Material.

Shell application - Kam-ui

...

It has been tested under the following conditions:

• Angular version 1214.2.1612

• Angular Material 1214.2.137

  • With the CSS class mat-typography added on the body tag in index.html

• angular-architects/module-federation 1214.53.314

• angular-architects/module-federation-tools 1214.53.314

• Be aware of routing as described here: Routing

...