Question

我想从远程服务器动态导入Angular4模块。这是为了创建一个与插件架构一起使用的系统。因此，“主机应用”非常重要。不应该在它的EntryComponents中声明这些模块。我已经设法使用本指南获得了我想要的结果：

https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

以及提供的代码 https://github.com/maximusk/Here-is-what-you-need-to-know-about-dynamic-components-in-Angular

进行一些小的更改，然后从同一服务器加载依赖项。

当我尝试将此逻辑迁移到我的Anglular-CLI应用程序时，我的问题出现了，因此webpack发挥作用。

我看过的帖子和文章包括（到目前为止最有用的内容）;
- Get and load a remote component/module in an angular 4.4 app
- How to load dynamic external components into Angular application

如果有人能帮助我实现以下目标，我认为这是一个胜利：

创建一个新的Angular Cli项目
从远程目标（不是同一个应用程序）动态导入模块（组件），最好是可能依赖于另一个模块
在app.component.ts

如果使用任何特殊版本，请同时列出我一直在使用最新的Angular4 cli和SystemJS@0.20.19无济于事。
在有效的代码中，应用程序是使用SystemJS@0.19.39引导的（虽然我也无法在CLI基本应用程序中使用它）

编辑：

使用这些步骤：
新的堆栈溢出示例
npm install systemjs（安装最新版本）
ng g dynamic-host
copy＆＃34; fetch＆＃34; -code，因为它在systemjs bootstrapped应用程序中工作 - 见下文
声明var SystemJS;在动态主机组件的顶部

它进入SystemJS导入功能，但从不触发.then，也不输出任何进一步的东西。我也尝试过systemjs v0.19.39，然后我得到了一个 404 - http://localhost:4200/traceur
错误。

我尝试进一步深入了解SystemJS，但我的知识有点太局限，无法理解我所看到的。

  public fetchModule() {
    return new Promise((resolve, reject) => {
      console.info(`[${this.constructor.name}] - Before import`);
      SystemJS.import('https:/some-remote-server/some-remote-module.module.ts')
        .then((_module) => {
          // never gets to this point
          console.info(`[${this.constructor.name}] - After import - then`);
        })
        .catch((err) => {
          reject(err);
          console.info(`[${this.constructor.name}] - After import - catch`);
        });
    });
  }

我已经在这方面苦苦挣扎了一段时间，所以不清楚或者您是否需要更多信息，请告诉我。我真的很想让这个工作在我身边。

编辑2：
根据您的反馈，我创建了一个干净的插件＆＃39;这只是一个干净的角度模块，导出一个在html中显示内容的组件。我已经尝试了两种＆＃39; tsc＆＃39;和＆＃39; node_modules / .bin / ngc -p tsconfig-aot.json＆＃39;，两种方法记录结果

[DynamicHostComponent] - 导入后 - 捕获
错误：无法动态转换ES模块
需要通过SystemJS.config({ transpiler: 'transpiler-module' })配置加载程序插件。
试图：

SystemJS.import('some-server/widget-without-deps/index.js')

正如您所看到的，它至少现在来自System.import ..

These are the files on the server using ngc
These are the files on the server using tsc

如何在Angular 4

0 个答案: