角 - 動態模塊加載和編譯

我正在開發與科爾多瓦的Ionic 3/Angular 4應用程序。我們需要能夠獨立於應用創建模塊/組件以快速改變例如信息頁面。我已閱讀本：角 - 動態模塊加載和編譯

具體地說，我試圖做什麼筆者做了下

dynamic component loading and compilation

@ViewChild('vc', {read: ViewContainerRef}) _container: ViewContainerRef; 

System.import('http://localhost:8080/path/to/js/file.js').then((module) => { 
     this._compiler.compileModuleAndAllComponentsAsync(module.ExampleModule) 
      .then((compiled) => { 
       const factory = compiled.componentFactories[0]; 
       this._container.createComponent(factory); 
      }) 
    })

這是在Github找到示例應用程序的工作英寸

但據我所知離子/角使用webpack，我不想用SystemJS取代Webpack（如果可能的話）。我只想使用來自SystemJS的System.import()或與Webpack類似的東西。而我只是不知道如何配置。

現在我收到此錯誤：

ERROR Error: Uncaught (in promise): Error: Cannot find module 'http://localhost:8080/path/to/js/file.js'. 
Error: Cannot find module 'http://localhost:8080/path/to/js/file.js'. 
    at script-loader lazy:2 
    at new t (polyfills.js:3) 
    at webpackEmptyAsyncContext (script-loader lazy:2) 
    at ScriptLoaderProvider.webpackJsonp.333.ScriptLoaderProvider.loadScript (script-loader.ts:19) 
    at FlexiPage.webpackJsonp.112.FlexiPage.ionViewDidLoad (flexi.ts:38) 
    at ViewController._lifecycle (view-controller.js:566) 
    at ViewController._didLoad (view-controller.js:439) 
    at NavControllerBase._didLoad (nav-controller-base.js:950) 
    at t.invoke (polyfills.js:3) 
    at Object.onInvoke (core.es5.js:3890) 
    at script-loader lazy:2 
    at new t (polyfills.js:3) 
    at webpackEmptyAsyncContext (script-loader lazy:2) 
    at ScriptLoaderProvider.webpackJsonp.333.ScriptLoaderProvider.loadScript (script-loader.ts:19) 
    at FlexiPage.webpackJsonp.112.FlexiPage.ionViewDidLoad (flexi.ts:38) 
    at ViewController._lifecycle (view-controller.js:566) 
    at ViewController._didLoad (view-controller.js:439) 
    at NavControllerBase._didLoad (nav-controller-base.js:950) 
    at t.invoke (polyfills.js:3) 
    at Object.onInvoke (core.es5.js:3890) 
    at c (polyfills.js:3) 
    at c (polyfills.js:3) 
    at polyfills.js:3 
    at t.invokeTask (polyfills.js:3) 
    at Object.onInvokeTask (core.es5.js:3881) 
    at t.invokeTask (polyfills.js:3) 
    at r.runTask (polyfills.js:3) 
    at o (polyfills.js:3) 
    at HTMLElement.invoke (polyfills.js:3)

它看起來就像沒有找到資源，但我認爲這是一個SystemJS錯誤配置，因爲它在示例應用程序。實際上，我面臨的第一個問題是，如何正確添加SystemJS到Ionic應用程序。

如果有人有一些見解，我將非常感激。

來源

2017-09-05 malua

你使用的是什麼版本的webpack？如果你使用'v3'，如果你在構建時知道模塊名**，你可以使用'import（）'函數。檢查[這個線程]（https://github.com/webpack/webpack/issues/3098）。我使用了SystemJS，因爲模塊名稱在構建時不知道，webpack無法加載它在構建時不知道的模塊 –

感謝您的快速回復，但這正是我需要實現它的方式。在構建時不會知道這些模塊。也許我應該在離子論壇上發佈一個關於如何添加systemJS的問題。 – malua

那麼你不能使用webpack動態加載模塊。你必須使用SystemJS或FuseBox –

角度編譯器在運行時不包含在AOT編譯（Ionic生成構建的默認值）中，因此您不希望使用AOT作爲離子，因爲您希望應用盡可能快。

來源

2018-01-16 17:39:44

角 - 動態模塊加載和編譯

回答

相關問題