Angular

Question

我正在使用 cordova 开发 Ionic 3 / Angular 4 应用程序。我们需要能够独立于应用程序创建 modules/components 以快速更改，例如信息页面。我读过这个：

具体来说，我正在尝试做作者在

下所做的事情

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 上的示例应用程序中有效。

但据我所知，ionic/angular 使用 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 应用程序中。

如果有人有见识，我将不胜感激。

Answer 1

angular 编译器在运行时不包含在 AOT 编译中（Ionic 生产构建的默认设置），不对 ionic 使用 AOT 不是一个好主意，因为您希望应用程序尽可能快.

Angular - 动态模块加载和编译

Angular - dynamic module loading and compilation

javascript

ionic-framework

webpack-2

systemjs