@onecx/angular-webcomponents Details

Using @onecx/angular-webcomponents to expose modules and Remote Components via Microfrontends is the recommended way within the OneCX platform. There are guides available that showcase how to transform already-created Microfrontend’s content to use Webcomponent method. In this section, all the specific functions available within the angular-webcomponents library are explained.

bootstrapModule Function

Please refer to this example of bootstrapModule. Use bootstrapModule function for Angular module bootstrapping.

This function ensures that the module is bootstrapped correctly and takes care of:

ngZone sharing
platform sharing

Table 1. bootstrapModule arguments
Argument	Type	Description
module	Type<M>	Angular Module to load
appType	'shell' or 'microfrontend'	Use 'microfrontend' for exposing modules
production	boolean	if the application should run in production mode

bootstrapRemoteComponent Function

Please refer to this example of bootstrapRemoteComponent. Use bootstrapRemoteComponent function for Angular Remote Component bootstrapping.

This function ensures that the Remote Component is bootstrapped correctly and takes care of:

Remote Component router connection
ngZone sharing
platform sharing

Table 2. bootstrapRemoteComponent arguments
Argument	Type	Description
component	Type<any>	Angular Component to load
elementName	string	HTML element name to be used for Custom Elements registration
production	boolean	if the application should run in production mode
providers	Array<(Provider \| EnvironmentProviders)>	Array of providers for Remote Component to run

createAppEntrypoint Function

Please refer to this example of createAppEntrypoint. Use createAppEntrypoint function to create an entrypoint component for Microfrontend’s module in the Microfrontend’s ngDoBootstrap function.

Table 3. createAppEntrypoint arguments
Argument	Type	Description
component	Type<any>	Angular Component to load, representing module entrypoint. This component should have router-outlet in its template to enable routing for a module.
elementName	string	HTML element name to be used for Custom Element’s registration of entrypoint
injector	Injector	Module’s injector (usually `this.injector`) to be used for dependency injection

initializeRouter Function

Use initializeRouter function as APP_INITIALIZER in the Microfrontend’s module definition.

This function ensures that the bootstrapped module’s router is connected with other routers.

@NgModule({
  ...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeRouter,
      multi: true,
      deps: [Router, AppStateService]
    }
  ]
})
export class RemoteModule ...

startsWith Function

Please refer to this example of startsWith. Use startsWith function when constructing Routes for Microfrontend’s module.

Table 4. createAppEntrypoint arguments
Argument	Type	Description
prefix	string	Prefix to match in order to display certain module content.

Table 5. Navigation
← Back to Module federation bootstrapping and configuration in OneCX