SystemJS:应用程序死于状态Loading_source_code:找不到模块

Question

因此，我们正在建立一个由多个React应用程序组成的较大应用程序。我们正在使用单SPA框架，并运行了单SPA-PORTAL-EXAMPL。

在示例中，SystemJS直接来自portal/libs文件夹。我们将其更改为通过NPM进行管理，并且在运行npm update后，我们正在使用SystemJSv。3.0.2。

。

/portal/src/helper.js中定义的loadApp函数使用SystemJS.import()（将其更改为import()，结果相同）。

WebPack被配置为将singleSpaEntry.js文件用于url http://localhost:9001/app1/src/singleSpaEntry.js（对于app1）作为AMD模块。做得很好，我可以直接在浏览器中打开该文件。

在localhost:9000上打开门户应用时，我还可以验证loadApp功能是否正在运行。但是，我收到以下错误消息：

uck offult app1：应用程序'app1'死于状态loading_source_code： 找不到模块'/app1/src/singlespaentry.js' 在http：//localhost：9000/main.js：12500：11

我对每个子应用程序都有此错误，我尝试了多个WebPack配置，但是我认为此问题要么与SystemJS本身有关，要么与Singlespaentry.js中的模块声明的方式有关。

。

任何帮助都将不胜感激。

Answer 1

您需要做的是：

1. 在浏览器（Localhost：9000）中打开root配置项目
2. 启用开发工具（localStorage.setItem('devtools', true)）
3. 重新加载
4. 从屏幕底部打开橙色的按钮
5. 从其pkg.json文件（@your_directory/micro_front_end_name）获取微型前端应用程序名称
6. 创建一个替代并在此处添加微型前端名称
7. 对于覆盖链接，请粘贴您的Micro Frontend启动和运行的URL（例如，http：//localhost：8080）
8. 繁荣，现在您在那里！

btw，如果您仍在看到有关pkg的错误，例如React，React路由器，VUE或任何像它们这样的高级事物，您也需要为它们创建一个替代，并且它们的链接将来自cdn带有所需版本的CloudFlare。

Answer 2

我今天对此问题感到头疼，我只能通过在systemjs.import（）的配置上添加.default来解决它看看第21行，他将.default放在其中，这足以使我的应用程序正常工作。

希望它有帮助！

Answer 3

在我的情况下，我在根的index.ejs中缺少这一行：

<script type="systemjs-importmap">
{
  "imports": {
    "@example/root-config": "//localhost:9000/example-root-config.js",
    "@example/application1": "//localhost:8080/example-application1.js"  <!-- Missing this line-->
  }
}