angular - 我如何导入角度为 5 或 6 的远程组件

Question

该项目包含一个工作示例并且效果很好

https://github.com/dianadujing/dynamic-remote-component-loader

我正在尝试将此代码重新用于我自己的项目：

ngAfterViewInit(){

const url = 'https://gist.githubusercontent.com/hamoom/afe499b60b55f3af8fd31eb04ca8cadf/raw/cf71ea940b54691085e9b9267ee62a52a167d927/app.module.ts';
console.log(System.import(url));

const importer = (url:any) => Observable.fromPromise(System.import(url));
console.log('importer:', importer);
importer(url)
  .subscribe((modules) => {
    console.log('modules:', modules, modules['AppModule']);
    this.cfr = this.compiler.compileModuleAndAllComponentsSync(modules['AppModule']);
    console.log(this.cfr,',', this.cfr.componentFactories[0]);
    this.putStuffHere.createComponent(this.cfr.componentFactories[0], 0);
  });
}

我收到此错误：

core.js:1449 错误错误：未捕获（承诺）：错误：找不到模块' https://gist.githubusercontent.com/hamoom/afe499b60b55f3af8fd31eb04ca8cadf/raw/cf71ea940b54691085e9b9267ee62a52a167d927/app.module.ts '。

还：

/src/app/upsell/upsell.component.ts 35:20-38 关键依赖：依赖的请求是一个表达式

我也试过用这个：

import(url).then(module => {
    console.log(module)               
  }
);

我仍然得到这个丢失的模块错误。我怎样才能抓住这个远程组件？这段代码现在似乎只适用于同一文件系统上的组件。

我设法使用我的文件系统上的一个组件来完成这项工作

  import('./meh.component').then(module => {
      console.log(module)
      this.cfr = this.compiler.compileModuleAndAllComponentsSync(module['AppModule']);
      this.footer.createComponent(this.cfr.componentFactories[0], 0);
    }
  );

如果我将导入中的参数更改为我的远程脚本，它无法访问它..

标签： angulartypescriptecmascript-6componentsangular6