Angular 需要微前端的 polyfills.js 以及 vendor.js 和 main.js 来加载元素。并且只加载第一个声明的 main.js

Question

我已经构建了 2 个具有 angular 元素的微型应用程序。使用 ngx-built-blus 和 --output-hashing 非 --single-bundle true 构建微型应用程序。在本地主机的 2 个不同端口为它们提供服务。我目前面临以下问题。 Shell 应用是常规 angular 应用

除非我在 shell 应用程序中添加 polyfills.js 和 vendor.js 的脚本以及 main.js，否则它不会加载。 Chrome给出错误

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>

如果我确实添加了所有 polyfills.js、vendor.js 和 main.js，shell 应用程序只会加载顶级微应用程序。 shell app-root 和其他微应用未加载

这是因为构建过程出了问题吗？ ngx-build-plus 应该用 main.js 打包供应商。如果那是真的，为什么微应用程序在它的 main.js 中找不到它。微应用程序是否需要一些设置才能从 main.js

中找到它的供应商和 polyfill

Answer 1

我通过在 serve 命令中添加 --single-bundle true 解决了这个问题。仅添加 ng build 命令是不够的。

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

Angular 需要微前端的 polyfills.js 以及 vendor.js 和 main.js 来加载元素。并且只加载第一个声明的 main.js

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

angular

angular-elements

micro-frontend

ngx-build-plus