title: Debugging Ionic 2 project with TypeScript in WebStorm 11
body: <p>I want to write an Ionic 2 application with TypeScript using WebStorm 11.0.3 as IDE in OS X. The problem I found is that I am not able to debug TypeScript files using break points in WebStorm. So far I can only debug transpiled JavaScript files.</p>
  
  <p>I will describe what I did and what I want in the end.</p>
  
  <ol>
  <li><p>I created a new Ionic 2 project with TypeScript typing:</p>
  
  <pre><code>$ ionic start demo sidemenu --v2 --ts
  </code></pre></li>
  <li><p>I added to the <code>tsconfig.json</code> file two flags: <code>"sourceMap": true</code> and <code>"removeComments": false</code>, resulting in the following file:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false
    },
    "filesGlob": [
      "**/*.ts",
      "!node_modules/**/*"
    ],
    "exclude": [
      "node_modules",
      "typings/main",
      "typings/main.d.ts"
    ],
    "compileOnSave": false,
    "atom": {
      "rewriteTsconfig": false
    }
  }
  </code></pre></li>
  <li><p>I modified the <code>webpack.config.js</code> file adding <code>devtool: 'source-map'</code> to its module exports section. The final config file is (don't pay attention to commented lines):</p>
  
  <pre><code>var path = require('path');
  
  
  module.exports = {
    devtool: 'source-map',
    entry: [
      path.normalize('es6-shim/es6-shim.min'),
      'reflect-metadata',
      path.normalize('zone.js/dist/zone-microtask'),
      path.resolve('app/app')
    ],
    output: {
      path: path.resolve('www/build/js'),
      filename: 'app.bundle.js',
      pathinfo: false, // show module paths in the bundle, handy for debugging
      //devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
      //devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
    },
    module: {
      loaders: [
        {
          test: /\.ts$/,
          loader: 'awesome-typescript',
          query: {
            doTypeCheck: true,
            resolveGlobs: false,
            externals: ['typings/browser.d.ts']
          },
          include: path.resolve('app'),
          exclude: /node_modules/
        },
        {
          test: /\.js$/,
          include: path.resolve('node_modules/angular2'),
          loader: 'strip-sourcemap'
        },
        //{
        //  test: /\.js$/,
        //  loader: 'strip-sourcemap'
        //}
      ],
      noParse: [
        /es6-shim/,
        /reflect-metadata/,
        /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
      ]
    },
    resolve: {
      root: ['app'],
      alias: {
        'angular2': path.resolve('node_modules/angular2')
      },
      extensions: ["", ".js", ".ts"]
    }
  };
  </code></pre></li>
  <li><p>I opened the project in WebStorm 11 and created a new JavaScript debug configuration. The URL in my case is <code>http://192.168.1.16:8100</code> and following <a href="https://stackoverflow.com/questions/34254820/intellij-idea-typescript-webpack-debugging-only-works-with-javascript-breakpoint">question</a>, I set the remote URL for the entire project as <code>webpack:///.</code>, just that. I cannot post an image because of my current level of reputation, sorry.</p></li>
  <li><p>In the terminal tab of WebStorm I typed <code>ionic build</code> and then <code>ionic serve</code> in order to compile and serve the project in my default browser, which is Safari.</p></li>
  <li><p>I installed previously Chrome with the JetBrains Chrome Extension so I can debug the application hitting on the debug icon located on the right top near the configuration box.</p></li>
  </ol>
  
  <p>If I place a break point in the TypeScript, it is <strong>not</strong> hit. If I place a break point in the transpiled JavaScript files (not the bundle file) it is hit. What I would like to do is to debug directly TypeScript, not the transpiled files. Does anyone have an idea of what I am doing wrong or missing?</p>
  
  <p>Notes:</p>
  
  <ul>
  <li>I want to debug with visual break points TypeScript, so <code>debugger;</code> does not help me, because it is effective only at the transpiled level (it's the same I currently achieve with break points).</li>
  <li><code>.js</code> and <code>.map</code> files are generated for each <code>.ts</code> file in the same folder than the TypeScript file.</li>
  <li>The bundle file <code>app.bundle.js</code> has its own <code>app.bundle.map</code> file and it is working, since the debugger stops at the individual transpiled files such as <code>app.js</code> or <code>list.js</code> derived from <code>app.ts</code> and <code>list.js</code>.</li>
  <li>I use default configuration for TypeScript in WebStorm. I didn't add any file watcher, WebStorm is using its bundle version of TypeScript, etc.</li>
  <li>If I follow the same steps with the same Ionic 2 project using ES6, I can debug ES6 original files.</li>
  <li><p>Tools versions:</p>
  
  <pre><code>$ npm ls -g --depth 0
  /usr/local/lib
  ├── cordova@6.0.0
  ├── ionic@2.0.0-beta.17
  ├── ios-deploy@1.8.5
  ├── ios-sim@5.0.6
  ├── npm@2.14.12
  └── typescript@1.8.2
  </code></pre></li>
  </ul>