[英]Can I dynamically import a JS module that uses rxjs into an Angular App
I have built an application with Angular 12.我用 Angular 12 构建了一个应用程序。
I have a JS module called dynamic_module.js which is not available at build time which I want to import and use in the app.我有一个名为 dynamic_module.js 的 JS 模块,它在构建时不可用,我想在应用程序中导入和使用它。 However, dynamic_module.js uses rxjs and other imports - all of which are already used in the Angular application and so included in the built webpack.
但是,dynamic_module.js 使用 rxjs 和其他导入 - 所有这些都已在 Angular 应用程序中使用,因此包含在构建的 webpack 中。 dynamic_module is not an Angular / webpack artifact or anything complicated - it is a simple JavaScript file located on the same server but not available at build time .
dynamic_module 不是 Angular / webpack 工件或任何复杂的东西 - 它是一个简单的 JavaScript 文件,位于同一服务器上,但在构建时不可用。
When I try to import "dynamic_module.js" using the import(<path_to_dynamic_module.js> ) function - (I'm assuming this method is hi-jacked by webpack) I get an error:当我尝试使用 import(<path_to_dynamic_module.js> ) function 导入“dynamic_module.js”时 - (我假设这个方法被 webpack 劫持)我得到一个错误:
"Error: Cannot find module '<path_to_dynamic_module.js>' ".
“错误:找不到模块'<path_to_dynamic_module.js>'”。
I expected this because the dynamic_module.js is not available when the app was built.我预料到了这一点,因为在构建应用程序时 dynamic_module.js 不可用。
So, I tried the method of inserting a <script>
element into the header -所以,我尝试了将
<script>
元素插入 header 的方法 -
eg <script type="module" src="<url_of_dynamic_module.js>"></script>
例如
<script type="module" src="<url_of_dynamic_module.js>"></script>
this loads the module but reports the error:这会加载模块但报告错误:
Failed to resolve module specifier "rxjs".
无法解析模块说明符“rxjs”。 Relative references must start with either "/", "./", or "../".
相对引用必须以“/”、“./”或“../”开头。
I also tried this without the import of rxjs in the module, and it works ok.我也试过这个,没有在模块中导入 rxjs,它工作正常。
And if I try using SystemJS with the babel transpiler and try to import the dynamic_module.js, I get an error when System JS tries to load the rxjs module it goes to http.如果我尝试将 SystemJS 与 babel 转译器一起使用并尝试导入 dynamic_module.js,当 System JS 尝试加载 rxjs 模块时,我会收到错误消息,它会转到 http。
Error: Fetch error: 404 Not Found Instantiating http://localhost:4400/rxjs
错误:获取错误:404 Not Found 实例化 http://localhost:4400/rxjs
This also works when the import is removed from dynamic_module.js.当从 dynamic_module.js 中删除导入时,这也有效。
My question is: Can modules dynamically loaded with SystemJS (or any other method) import other modules that are already loaded by webpack - without duplication or reloading via http?我的问题是:使用 SystemJS(或任何其他方法)动态加载的模块是否可以导入已经由 webpack 加载的其他模块 - 无需通过 http 进行复制或重新加载?
If this is not possible, I could make all the necessary module files available via http for SystemJS to load (I have done this with the 'babel' transpiler modules for SystemJS).如果这是不可能的,我可以通过 http 提供所有必要的模块文件,以便加载 SystemJS(我已经使用 SystemJS 的 'babel' 转译器模块完成了此操作)。 Would that cause two copies of the modules (ie. rxjs in this example) to be loaded into the browser - could this be a serious problem (space/performance/clashes...)?
这是否会导致模块的两个副本(即本例中的 rxjs)加载到浏览器中 - 这可能是一个严重的问题(空间/性能/冲突......)吗?
Here is a very simple example of the module - this can load by any method if the import is removed, but fails in if the import is included .这是模块的一个非常简单的示例 - 如果导入被删除,它可以通过任何方法加载,但如果导入被包含则失败。
dynamic_module.js动态模块.js
import { Observable} from 'rxjs';
export class MyClass{
hello( msg ) {
console.log('[MODULE] Hello World');
console.log(msg);
}
}
Thanks for any advice!感谢您的任何建议!
Ok, after some research I have solved my problem:好的,经过一些研究,我解决了我的问题:
Let me describe concisely what the issue I had was:让我简明扼要地描述一下我遇到的问题:
The solution is to let SystemJS know in advance that the dependencies are already available.解决方案是提前让 SystemJS 知道依赖项已经可用。 This is done using the SystemJS.set() method: for example in my case the key steps were:
这是使用 SystemJS.set() 方法完成的:例如,在我的情况下,关键步骤是:
import * as rxjs from "rxjs";
SystemJS.set('rxjs', SystemJS.newModule(rxjs));
SystemJS.import( <url_of_module> ).then( module=>.....});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.