module-federation-examples
module-federation-examples copied to clipboard
Internal Dependencies not installed when exposed only component
MFE1:
module.exports = withModuleFederationPlugin({
name: 'mfe3',
exposes: {
'./web-components': './projects/mfe3/src/bootstrap.ts',
'./HomeCmp': './projects/mfe3/src/app/home/home.component.ts',
},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},
});
App Module in MFE1:
ngDoBootstrap() {
const ce = createCustomElement(HomeComponent, { injector: this.injector });
customElements.define('angular1-element', ce);
}
Shell App:
async loadRemoteModuleComponent() {
const module = await loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:3200/fragment1/v2/remoteEntry.js',
exposedModule: './HomeCmp'
});
const { HomeComponent } = module;
console.log(HomeComponent);
const ref = this.viewContainer.createComponent(HomeComponent);
}
When I use Homemp, it gives me the component but its peer dependency is not loaded: Error while plotting: Error: Peer dependency plotly.js isn't installed
When I load the web-component using wrapper, then the plotly chart is shown.
<div *ngFor="let item of items" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="box">
<mft-wc-wrapper [options]="item"></mft-wc-wrapper>
</div>
</div>
items: WebComponentWrapperOptions[] = [
{
type: 'module',
remoteEntry: 'http://localhost:3200/fragment1/v1/remoteEntry.js',
exposedModule: './web-components',
elementName: 'angular1-element'
},
];
Any help how I can make the dependency be installed when using component?
@ScriptedAlchemy any help here please