search

ishedu / module-federation-angular

12 stars 11 forks source link

Not an issue, Want to understand why an angular library is created for loading remote module/file etc #1

Open spoddutu opened 2 years ago

spoddutu commented 2 years ago

Hi @ishedu

Nice blog and an example for Angular with module federation. But what i want to understand is, there is an @angular/architects package which gives ability to load remote module/file, then we need a separate Angular library for doing the same?

The reason to ask this question is, I am using @angular-architects package for my project which uses @angular-builders/custom-webpack instead of default Angular builder. But in my case it is not working as expected. So will your approach help me in that way.

Below is the error I got while creating new component from Dynamically loaded code

core.js:6479 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'bindingStartIndex') TypeError: Cannot read properties of null (reading 'bindingStartIndex') at Module.ɵɵelementStart (core.mjs:14503:46) at BarChartComponent_Template (bar-chart.component.html:1:1) at executeTemplate (core.js:9599:1) at renderView (core.js:9402:1) at renderComponent (core.js:10683:1) at renderChildComponents (core.js:9267:1) at renderView (core.js:9427:1) at ComponentFactory$1.create (core.js:25137:1) at ViewContainerRef.createComponent (core.js:23172:1) at bar-chart-host.component.ts:22:16 at resolvePromise (zone.js:832:39) at zone.js:739:21 at asyncGeneratorStep (asyncToGenerator.js:6:1)

Below is the code to load code from remote async ngOnInit() { const { BarChartComponent } = await loadRemoteModule({ type: 'module', remoteEntry: 'http://localhost:7000/remoteEntry.js', exposedModule: './BarChart', });

this.vcref.createComponent( this.cfr.resolveComponentFactory(BarChartComponent) ); }

Appreciate your help, Santhosh P

ishedu commented 2 years ago

Hi @spoddutu , Not sure if you are still experiencing this issue but apologies for responding late. I am not too familiar with using that package because I created a library to perform all of the Module Federation operations. With the @angular/architects package, you should be able to access files. I have a couple of questions.

Does the component file you are sharing have any child components and how are you sharing files in the webpack.config file?. Does the container contain the BarChart file? I would need more information or even take a look at your project to see how best to assist you.