title: How to load dynamic external components into Angular application
body: <p>I'm facing a problem with Angular application.</p>
  
  <p>I would like to have an angular application written in Typscript build with (aot).</p>
  
  <p>The aim is to display a user dashboard with some widgets. A widget is an angular component.</p>
  
  <p>My app comes with some embedded widgets.
  But widgets should be extended by something like a market place; or created manually.</p>
  
  <p>The market should download files (js/ts/bunlde..??) into a specific folder.</p>
  
  <p>Then my app should be able to load the new widgets (= ng component) and instanciate them.</p>
  
  <p>My folder structure (production)</p>
  
  <pre><code>  |- index.html
    |- main.f5b448e73f5a1f3f796e.bundle.js
    |- main.f5b448e73f5a1f3f796e.bundle.js.map
    |- .... (all other files generated)
    |- externalWidgets
        |- widgetA
              |- widjetA.js
              |- widjetA.js.map
              |- assets
                   |- image.png
        |- widgetB
              |- widjetB.ts
              |- widjetB.html
              |- widjetB.css
  </code></pre>
  
  <p>Then when loading the user page, the database say that there is a widgetA.
  So the aim is to dynamically load files and instanciate included component.</p>
  
  <p>I've tried many solutions, using "require" and "System.import" but both fails when the path to load is dynamically generated.</p>
  
  <p>Is this should be possible ?
  I can change my code structure; change external widgets.. (for example widgetB is not yet transpiled,...)</p>
  
  <p>In fact I'm looking for a "plugin system" with an Angular4/webpack application.</p>