Import kam-pickers
Kam-pickers is implemented as a WebComponent and can be imported by the use of WebPack and Module federation.
Example of import
There is several ways to import kam-pickers. The first approach it to add a remote entry in the ModuleFederationPlugin in webpack.config.js. For demonstration purposes the kam-pickers project is running on http://localhost:4001.
| Code Block | ||
|---|---|---|
| ||
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
...
module.exports = {
...,
plugins: [
new ModuleFederationPlugin({
name: 'kamUi',
remotes: {
kamPickers: 'kamPickers@http://localhost:4001/remoteEntry.js',
},
shared: share({
'@angular/core': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
'@angular/common': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
'@angular/common/http': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
'@angular/router': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
}),
}),
],
}; |
If you are using TypeScript in your host application you have to make sure you have the following compiler options specified in tsconfig.json. To enable dynamic module loading.
| Code Block |
|---|
{
...,
"compilerOptions": {
...,
"moduleResolution": "node",
"target": "es2017",
"module": "es2020"
},
...
} |
Additionally you have to declare a module to "trick" TypeScript into thinking the module exists. You do this by adding a kamPickers.d.ts file in the root of the project with the following content.
| Code Block | ||
|---|---|---|
| ||
declare module 'kamPickers/WebComponent'; |
Now you can import a remote module as a JavaScript Promise and use WebComponents like the following example in Angular:
| Code Block | ||
|---|---|---|
| ||
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'kam-information',
templateUrl: './information.component.html',
styleUrls: ['./information.component.scss'],
})
export class InformationComponent {
webcomponent$ = from(import('kamPickers/WebComponent'));
isLoaded$ = this.webcomponent$.pipe(
startWith(false),
map((res) => !!res)
);
constructor() {}
openOrganizationPicker() {
window.dispatchEvent(
new CustomEvent('openOrganizationPicker', {
detail: {
callerId: '1',
selected: [ '139636' ],
},
})
);
}
} |
information.component.html
| Code Block | ||
|---|---|---|
| ||
<button [disabled]="(isLoaded$ | async) === false" mat-raised-button color="accent" (click)="openOrganizationPicker()">
Open organization picker
</button>
<ng-container *ngIf="webcomponent$ | async">
<kam-pickers></kam-pickers>
</ng-container> |
The above code snippets also showcases how inputs which interacts with the web component are disabled while the web component loads. The tag <kam-pickers> is custom tag for the WebComponent
When using Angular as frontend framework a library called @angular-architects/module-federation and @angular-architects/module-federation-tools can be used instead of doing the ModuleFederation work yourself. Here you can call loadRemoteModule() instead as shown below.
information.component.ts
| Code Block |
|---|
...
webcomponent$ = from(
loadRemoteModule({
remoteEntry: 'http://localhost:4001/remoteEntry.js',
exposedModule: './WebComponent',
remoteName: 'kamPickers',
})
);
...
} |
ValueSet picker
The valueSet picker can be used to select the following valueSets:
...