该项目包含一个工作示例并且效果很好
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);
}
);
如果我将导入中的参数更改为我的远程脚本,它无法访问它..