Question

我正在开发一款带有cordova的Ionic 3 / Angular 4应用程序。我们需要能够独立于应用程序创建模块/组件，以便快速更改，例如信息页面。我读过这个：

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

下所做的事情

动态组件加载和编译

@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应用程序。

如果有人有一些见解，我会非常感激。

Answer 1

角度编译器在AOT编译中不包含在运行时（Ionic生成版本的默认值），不希望AOT用于离子是不是一个好主意，因为您希望应用程序尽可能快。< / p>

Angular - 动态模块加载和编译

1 个答案: