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.

...