module-federation-examples icon indicating copy to clipboard operation
module-federation-examples copied to clipboard

Internal Dependencies not installed when exposed only component

Open dassum03-BH opened this issue 2 years ago • 0 comments

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

dassum03-BH avatar Oct 03 '23 13:10 dassum03-BH