title: WebStorm : debugging typescript
body: <p><strong>Issue updated. Please check the edit</strong></p>
  
  <p>I want to use the debugger included in Webstorm to run my project. I'm
  using Angular2 and TypeScript. I need to place breakpoints into my typescript files.</p>
  
  <p>Basically, my <code>index.html</code> just imports some .js files and starts my
  app by calling a function named <code>bootstrap</code> defined in another .js file (<em>transpiled from a .ts file !</em>).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;base href="/"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;!-- IE required polyfills, in this exact order --&gt;
      &lt;script src="../node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;
  
      &lt;script src="../node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  
      &lt;script src="build/core/system.config.js"&gt;&lt;/script&gt;
      &lt;script src="build/core/moduleLoader.js"&gt;&lt;/script&gt;
      &lt;script src="build/core/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          bootstrap();
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;app-view&gt;Loading...&lt;/app-view&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>bootstrap</code> is defined as follow : </p>
  
  <pre><code>const bootstrap:()=&gt;Promise&lt;void&gt;= async function() {
      await ModuleLoader.loadAll();
      System.import('core/app').then(null, console.error.bind(console));
  };
  
  window.bootstrap = bootstrap;
  </code></pre>
  
  <p>When I run my index.html in debug mode, an error is thrown,
  bootstrap() is not defined.</p>
  
  <p>When I run the app inside a browser, it works well. Have I missed some configuration ?</p>
  
  <p>I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>Maybe a usefull information :</p>
  
  <p>I'm using <strong>node</strong>. Into my main server-side script, I set up <strong>express</strong> and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.</p>