title: How to import modules dynamically from remote server in Angular 4
body: <p>I would like to import Angular4 modules dynamically from a remote server. This is to create a system that works with a plugins architecture. It is therefore important that the 'host app' shouldn't have to declare these modules in it's EntryComponents. I've managed to get the results I want, using this guide:</p>
  
  <p><a href="https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e" rel="nofollow noreferrer">https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e</a></p>
  
  <p>and the code provided at <br/>
  <a href="https://github.com/maximusk/Here-is-what-you-need-to-know-about-dynamic-components-in-Angular" rel="nofollow noreferrer">https://github.com/maximusk/Here-is-what-you-need-to-know-about-dynamic-components-in-Angular</a> <br/></p>
  
  <p>with some minor changes which then loads dependencies from the same server.</p>
  
  <p>My problem comes in when I try to migrate this logic to my Anglular-CLI app and so webpack comes into play.</p>
  
  <p>Posts and articles I've looked at includes (which were the most useful so far); <br/>
  - <a href="https://stackoverflow.com/questions/46321477/get-and-load-a-remote-component-module-in-an-angular-4-4-app">Get and load a remote component/module in an angular 4.4 app</a> <br/>
  - <a href="https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application/45506470#45506470">How to load dynamic external components into Angular application</a></p>
  
  <p>If anyone can help me to achieve the following, I would consider this a win:</p>
  
  <ol>
  <li>Create a new Angular Cli project</li>
  <li>Dynamically import a module (component) from a remote destination (not the same app), preferably that could have a dependency to another module</li>
  <li>Render it in app.component.ts</li>
  </ol>
  
  <p>If any special versions are used, please list them as well.<br/>
  I've been using the latest Angular4 cli and SystemJS@0.20.19 to no avail. <br/>
  In the code which did work, the app was bootstrapped using SystemJS@0.19.39 (Although I also couldn't get this to work in the CLI basic app)</p>
  
  <p><b>EDIT:</b> <br/></p>
  
  <p>Using these steps: <br/>
  ng new stack-overflow-example <br/>
  npm install systemjs (this installs the latest version) <br/>
  ng g dynamic-host <br/>
  copy "fetch"-code as it worked in systemjs bootstrapped app - see below<br/>
  declare var SystemJS; at top of dynamic-host component <br/></p>
  
  <p>It goes into the SystemJS import function but never triggers the .then nor does it output anything further. I've tried with systemjs v0.19.39 as well, then I get a <br/>
  404 - <a href="http://localhost:4200/traceur" rel="nofollow noreferrer">http://localhost:4200/traceur</a> <br/>
  error.</p>
  
  <p>I tried diving further into SystemJS, but I knowledge is a bit too limited to make any sense of what I see.</p>
  
  <pre><code>  public fetchModule() {
      return new Promise((resolve, reject) =&gt; {
        console.info(`[${this.constructor.name}] - Before import`);
        SystemJS.import('https:/some-remote-server/some-remote-module.module.ts')
          .then((_module) =&gt; {
            // never gets to this point
            console.info(`[${this.constructor.name}] - After import - then`);
          })
          .catch((err) =&gt; {
            reject(err);
            console.info(`[${this.constructor.name}] - After import - catch`);
          });
      });
    }
  </code></pre>
  
  <p>I've been struggling with this for quite some time, so whatever is unclear or should you need any more information, please let me know. I'm really keen to get this working on my side.</p>
  
  <p><b>EDIT 2:</b> <br/>
  Acting on your feedback, I've created a clean 'plugin' which is just a clean angular module exporting a component which displays something in the html. <br/>I've tried both 'tsc' and 'node_modules/.bin/ngc -p tsconfig-aot.json', with both methods logging the result <br/> </p>
  
  <p>[DynamicHostComponent] - After import - catch <br/>
  Error: Unable to dynamically transpile ES module <br/>
     A loader plugin needs to be configured via <code>SystemJS.config({ transpiler: 'transpiler-module' })</code>. <br/>
  upon trying to:</p>
  
  <pre><code>SystemJS.import('some-server/widget-without-deps/index.js')
  </code></pre>
  
  <p>As you can see, it at least now comes out of the System.import.. <br/></p>
  
  <p><a href="https://i.stack.imgur.com/ccKlG.png" rel="nofollow noreferrer">These are the files on the server using ngc</a> <br/>
  <a href="https://i.stack.imgur.com/HZv9X.png" rel="nofollow noreferrer">These are the files on the server using tsc</a> <br/></p>