title: How to use external Web Components in Angular 2?
body: <p>I am trying to figure out how Web Components developed by others (external to my app) could be used in my app.
  I have a UsefullComponent which I would like to use in my AppWithComponent. 
  The UsefullComponent (UsefullComponent.js) is stored in a directory called 'componentsLib', while my application code is store in directory called 'myApp'.
  I have also my index.html which imports 'myApp'.
  The whole thing compiles (I use TypeScript) but at run time I get an error 'GET <a href="http://127.0.0.1:8080/componentsLib/UsefullComponent" rel="nofollow">http://127.0.0.1:8080/componentsLib/UsefullComponent</a> 404 (Not Found)'.
  Any idea of what I do wrong?</p>
  
  <p>Here the code</p>
  
  <p><strong>UsefullComponent.ts</strong></p>
  
  <pre><code>import {bootstrap, Component, FORM_DIRECTIVES, 
     CORE_DIRECTIVES, Input} from 'angular2/angular2';
  
  @Component({
      selector: 'usefull-component',
      providers: [],
      template: `
          &lt;div&gt;
              &lt;h2&gt;My manifesto&lt;/h2&gt;
              &lt;h3&gt;{{manifesto}}&lt;/h3&gt;
          &lt;/div&gt;
          `,
      styleUrls: [],
      directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]
  })
  export class UsefullComponent { 
      public manifesto: string = 'I am a very usefull component';
  }
  </code></pre>
  
  <p><strong>AppWithComponent.ts</strong></p>
  
  <pre><code>import {bootstrap, Component, FORM_DIRECTIVES, 
          CORE_DIRECTIVES, provide} from 'angular2/angular2';
  import {UsefullComponent} from '../../componentsLib/UsefullComponent';
  
  @Component({
      selector: 'my-app-with-comp',
      providers: [UsefullComponent],
      template: `
          &lt;div&gt;
              &lt;h1&gt;I use components&lt;/h1&gt;
              &lt;usefull-component&gt;&lt;/usefull-component&gt;
          &lt;/div&gt;
          `,
      styleUrls: [],
      directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, UsefullComponent]
  })
  class AppWithComponent { 
      public niceComponent: UsefullComponent;
  
      constructor(inComponent: UsefullComponent) {
          this.niceComponent = inComponent;
      }
  }
  bootstrap(AppWithComponent);
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Components&lt;/title&gt;
  &lt;script src="../node_modules/es6-shim/es6-shim.js"&gt;&lt;/script&gt;
  &lt;script src="../node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;script src="../node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  System.config({
          packages: {'myApp': {defaultExtension: 'js'}}
  });
        System.import('myApp/myAppWithComp');
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;my-app-with-comp&gt;loading...&lt;/my-app-with-comp&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>