title: import Kinto (js library) into Angular 2 projet
body: <p>I am using angular-cli to create a new Angular 2 project. I am trying to add a js library <code>kinto</code>.</p>
  
  <p>However Angular 2 use typescript, and kinto is a js library, when i want to import it , Angular doesn't detect kinto.js which is in my node_modules.</p>
  
  <p>I tried to directly import it in my index.html and it doesn't work</p>
  
  <blockquote>
    <p>app.component.ts</p>
  </blockquote>
  
  <pre><code>import { Component } from '@angular/core';
  import  { EnvComponent } from "./env/env.component"
  import { Kinto } from "../../node"
  
  // Routage
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    directives: [ROUTER_DIRECTIVES, EnvComponent]
  })
  
  export class AppComponent {
  
    constructor(){
  
    }
  
  }
  </code></pre>
  
  <blockquote>
    <p>index.html</p>
  </blockquote>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;ModuleApp&lt;/title&gt;
    &lt;base href="/"&gt;
  
    {{#unless environment.production}}
    &lt;script src="/ember-cli-live-reload.js" type="text/javascript"&gt;&lt;/script&gt;
    {{/unless}}
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" href="vendor/materialize-css/dist/css/materialize.css"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;script src="../node_modules/requirejs/require.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;img src="app/ressources/img/INTESENS-logo-site-internet.png" alt=""&gt;
  &lt;/header&gt;
  &lt;app-root&gt;
    &lt;div class="preloader-wrapper big active" id="loader"&gt;
      &lt;div class="spinner-layer spinner-green-only"&gt;
        &lt;div class="circle-clipper left"&gt;
          &lt;div class="circle"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="gap-patch"&gt;
          &lt;div class="circle"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="circle-clipper right"&gt;
          &lt;div class="circle"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/app-root&gt;
  
  {{#each scripts.polyfills}}
  &lt;script src="{{.}}"&gt;&lt;/script&gt;
  {{/each}}
  &lt;script src="../node_modules/kinto/dist/kinto.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    System.import('system-config.js').then(function () {
      System.import('main');
    }).catch(console.error.bind(console));
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>system.config.ts</p>
  </blockquote>
  
  <pre><code>/***********************************************************************************************
   * User Configuration.
   **********************************************************************************************/
  /** Map relative paths to URLs. */
  const map: any = {
  };
  
  /** User packages configuration. */
  const packages: any = {
  };
  
  ////////////////////////////////////////////////////////////////////////////////////////////////
  /***********************************************************************************************
   * Everything underneath this line is managed by the CLI.
   **********************************************************************************************/
  const barrels: string[] = [
  
    'materialize-css',
  
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/forms',
    '@angular/http',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
  
    // Thirdparty barrels.
    'rxjs',
  
    // App specific barrels.
    'app',
    'app/shared',
    'app/module',
    'app/env',
    /** @cli-barrel */
  
  ];
  
  const cliSystemConfigPackages: any = {};
  barrels.forEach((barrelName: string) =&gt; {
    cliSystemConfigPackages[barrelName] = { main: 'index' };
  });
  
  /** Type declaration for ambient System. */
  declare var System: any;
  
  // Apply the CLI SystemJS configuration.
  System.config({
    map: {
      '@angular': 'vendor/@angular',
      'rxjs': 'vendor/rxjs',
      'main': 'main.js',
      'materialize' : 'vendor/materialize-css'
    },
    packages: cliSystemConfigPackages
  });
  
  // Apply the user's configuration.
  System.config({ map, packages });
  </code></pre>
  
  <p>Thanks for your Help !</p>