Angular requires micro frontend's polyfills.js as well as vendor.js with main.js to load the element. And only loads the 1st declared main.js

Question

I have build 2 micro apps with angular elements. Built the micro apps with ngx-built-blus with --output-hashing non --single-bundle true. Served them in 2 different ports in localhost. I'm currently facing the following issue. Shell app is a regular angular app

1. Unless I add the script for polyfills.js & vendor.js along with main.js in the shell app, it's not loading. Chrome gives the error

runtime.js:80 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (runtime.js:80)
at Module../src/app/app.module.ts (main.js:436)
at __webpack_require__ (runtime.js:80)
at Module../src/main.ts (main.js:506)
at __webpack_require__ (runtime.js:80)
at Object.0 (main.js:529)
at __webpack_require__ (runtime.js:80)
at checkDeferredModules (runtime.js:46)
at Array.webpackJsonpCallback [as push] (runtime.js:33)
at vendor.js:1</code>

2. If I do add all polyfills.js, vendor.js and main.js the shell app is only loading the top micro app. The shell app-root and the other micro apps are not loaded

Is this because something is wrong with the build process? ngx-build-plus is supposed to pack vendor with main.js. If that's true, why can't the micro app find it within it's main.js. Is there some setting you need for the micro app to find it's vendor and polyfill from within main.js

Answer 1

I solved this by adding the --single-bundle true to the serve command. Adding it only the ng build command is not enough.

<code> ng serve --signle-bundle true </code>