2

This project contains a working example and works great

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

I'm trying to repurpose this code for my own project:

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);
  });
}

I'm getting this error:

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot find module 'https://gist.githubusercontent.com/hamoom/afe499b60b55f3af8fd31eb04ca8cadf/raw/cf71ea940b54691085e9b9267ee62a52a167d927/app.module.ts'.

also:

/src/app/upsell/upsell.component.ts 35:20-38 Critical dependency: the request of a dependency is an expression

i have tried using this too:

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

i still get this missing module error. How can I grab this remote component? this code only seems to work for components on the same file system now.

I managed to get this working using a component on my file system 

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

if I change the parameter inside import to my remote script its unable to reach it..

hamobi
  • 7,940
  • 4
  • 35
  • 64
  • Are you using `SystemJs`? `System.import(url)` is for `SystemJs` – penleychan May 11 '18 at 02:55
  • i have "systemjs": "^0.21.3", in my package.json file and I've run npm install. Is there anything else I need to do? – hamobi May 11 '18 at 03:04
  • If you have it and declare it globally it should work, have a look at https://stackoverflow.com/a/45506470/6736888 and https://stackoverflow.com/a/46328636/6736888 – penleychan May 11 '18 at 03:09
  • i have "declare var System:any;" on the top of my file. is there a difference between System and SystemJs? – hamobi May 11 '18 at 03:13
  • Not entirely sure, I think it should be `SystemJS` based on the src https://github.com/systemjs/systemjs/blob/master/dist/system.src.js#L2010 – penleychan May 11 '18 at 03:19

0 Answers0