我可以將使用 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=>.....});