我可以将使用 rxjs 的 JS 模块动态导入到 Angular 应用程序中吗

Question

我用 Angular 12 构建了一个应用程序。

我有一个名为 dynamic_module.js 的 JS 模块，它在构建时不可用，我想在应用程序中导入和使用它。 但是，dynamic_module.js 使用 rxjs 和其他导入 - 所有这些都已在 Angular 应用程序中使用，因此包含在构建的 webpack 中。 dynamic_module 不是 Angular / webpack 工件或任何复杂的东西 - 它是一个简单的 JavaScript 文件，位于同一服务器上，但在构建时不可用。

当我尝试使用 import(<path_to_dynamic_module.js> ) function 导入“dynamic_module.js”时 - （我假设这个方法被 webpack 劫持）我得到一个错误：

“错误：找不到模块'<path_to_dynamic_module.js>'”。

我预料到了这一点，因为在构建应用程序时 dynamic_module.js 不可用。

所以，我尝试了将<script>元素插入 header 的方法 -

例如<script type="module" src="<url_of_dynamic_module.js>"></script>

这会加载模块但报告错误：

无法解析模块说明符“rxjs”。 相对引用必须以“/”、“./”或“../”开头。

我也试过这个，没有在模块中导入 rxjs，它工作正常。

如果我尝试将 SystemJS 与 babel 转译器一起使用并尝试导入 dynamic_module.js，当 System JS 尝试加载 rxjs 模块时，我会收到错误消息，它会转到 http。

错误：获取错误：404 Not Found 实例化 http://localhost:4400/rxjs

当从 dynamic_module.js 中删除导入时，这也有效。

我的问题是：使用 SystemJS（或任何其他方法）动态加载的模块是否可以导入已经由 webpack 加载的其他模块 - 无需通过 http 进行复制或重新加载？

如果这是不可能的，我可以通过 http 提供所有必要的模块文件，以便加载 SystemJS（我已经使用 SystemJS 的 'babel' 转译器模块完成了此操作）。 这是否会导致模块的两个副本（即本例中的 rxjs）加载到浏览器中 - 这可能是一个严重的问题（空间/性能/冲突......）吗？

这是模块的一个非常简单的示例 - 如果导入被删除，它可以通过任何方法加载，但如果导入被包含则失败。

动态模块.js

import { Observable} from 'rxjs';
export class MyClass{
   hello( msg ) { 
     console.log('[MODULE] Hello World');
     console.log(msg);
   }
}

感谢您的任何建议！

Answer 1

好的，经过一些研究，我解决了我的问题：

让我简明扼要地描述一下我遇到的问题：

• 我试图在运行时将模块（dynamic_module.js）导入 Angular 应用程序，
• 该模块依赖于已捆绑在 Angular webpack (rxjs) 中的模块
• 我使用 SystemJS 导入我的动态模块
• SystemJS 试图通过从服务器重新加载模块来解决我的 dynamic_module 的依赖关系。
• 我觉得这是不必要的，因为模块已经存在于客户端应用程序中 - 无论如何，http 请求失败，因为在它寻找它们的地方找不到依赖关系。

解决方案是提前让 SystemJS 知道依赖项已经可用。 这是使用 SystemJS.set() 方法完成的：例如，在我的情况下，关键步骤是：

import * as rxjs from "rxjs";

SystemJS.set('rxjs', SystemJS.newModule(rxjs));

SystemJS.import( <url_of_module> ).then( module=>.....});