Javascript error when loading the remote entry upfront

[eironman]

Hello, I am trying to improve the library sharing between shell and microfronts using the feature to load the remote entry upfront:

https://www.angulararchitects.io/aktuelles/dynamic-module-federation-with-angular/ -> Improvement for Dynamic Module Federation

I am attaching screenshots of the code and the error:

zone-evergreen.js:1063 Unhandled Promise rejection: Cannot read property 'init' of undefined ; Zone: ; Task: HTMLScriptElement.addEventListener:load ; Value: TypeError: Cannot read property 'init' of undefined at dynamic-federation.js:28 at Generator.next () at tslib.es6.js:74 at new ZoneAwarePromise (zone-evergreen.js:1387) at Module.awaiter (tslib.es6.js:70) at initRemote (dynamic-federation.js:17) at HTMLScriptElement.script.onload [as zone_symbolON_PROPERTYload] (dynamic-federation.js:44) at HTMLScriptElement.wrapFn (zone-evergreen.js:763) at ZoneDelegate.invokeTask (zone-evergreen.js:406) at Zone.runTask (zone-evergreen.js:178) TypeError: Cannot read property 'init' of undefined at http://localhost:3000/vendor.js:52:25 at Generator.next () at http://localhost:3000/vendor.js:195:71 at new ZoneAwarePromise (http://localhost:3000/polyfills.js:1397:29) at Module.awaiter (http://localhost:3000/vendor.js:191:12) at initRemote (http://localhost:3000/vendor.js:41:20) at HTMLScriptElement.script.onload [as zone_symbolON_PROPERTYload] (http://localhost:3000/vendor.js:68:13) at HTMLScriptElement.wrapFn (http://localhost:3000/polyfills.js:773:39) at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.js:416:31) at Zone.runTask (http://localhost:3000/polyfills.js:188:47)

[manfredsteyer]

Can you share your example somehow? Would love to have a look at it.

[eironman]

Sure! I'll create a project in github and I'll share it.

[eironman]

Here you have three repos with the shell and two apps loaded by the shell. The shell is giving the error I referred in this issue, just return main.ts to its original content to see it working. Hope this helps, and many thanks for all the work you are doing!

https://github.com/eironman/module-federation-shell https://github.com/eironman/module-federation-app-a https://github.com/eironman/module-federation-app-b

[eironman]

@manfredsteyer, could you take a look at it? No hurries!

[manfredsteyer]

Thanks for the reminder. Look into it asap

[GillianPerard]

Hi, I think the problem is inside your shell app main.ts. You use in the loadRemoteEntry function the names with dashes whereas you use underscores in the micro-frontends application names.

Promise.all([
  loadRemoteEntry(environment.appAUrl + '/remoteEntry.js', 'app_a'),
  loadRemoteEntry(environment.appBUrl + '/remoteEntry.js', 'app_b')
])

[eironman]

Oh! @GillianPerard, I see your answer now! Sorry, and thanks for it.