Debugging Ionic 2 project with TypeScript in WebStorm 11

Question

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.

I will describe what I did and what I want in the end.

1. I created a new Ionic 2 project with TypeScript typing:

   $ ionic start demo sidemenu --v2 --ts
   

2. I added to the tsconfig.json file two flags: "sourceMap": true and "removeComments": false, resulting in the following file:

   {
     "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
     }
   }
   

3. I modified the webpack.config.js file adding devtool: 'source-map' to its module exports section. The final config file is (don't pay attention to commented lines):

   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"]
     }
   };
   

4. I opened the project in WebStorm 11 and created a new JavaScript debug configuration. The URL in my case is http://192.168.1.16:8100 and following question, I set the remote URL for the entire project as webpack:///., just that. I cannot post an image because of my current level of reputation, sorry.

5. In the terminal tab of WebStorm I typed ionic build and then ionic serve in order to compile and serve the project in my default browser, which is Safari.

6. 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.

If I place a break point in the TypeScript, it is not 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?

Notes:

• I want to debug with visual break points TypeScript, so debugger; does not help me, because it is effective only at the transpiled level (it's the same I currently achieve with break points).
• .js and .map files are generated for each .ts file in the same folder than the TypeScript file.
• The bundle file app.bundle.js has its own app.bundle.map file and it is working, since the debugger stops at the individual transpiled files such as app.js or list.js derived from app.ts and list.js.
• I use default configuration for TypeScript in WebStorm. I didn't add any file watcher, WebStorm is using its bundle version of TypeScript, etc.
• If I follow the same steps with the same Ionic 2 project using ES6, I can debug ES6 original files.

• Tools versions:

  $ 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
  

Answer 1

I found the solution. The problem was I said yes to the question that WebStorm asked me when the Ionic project was opened Compile TypeScript to JavaScript?. I should have said no.

When you say yes, .js and .map files are generated for each .ts file. This is the error. There should be only your .ts source files and a single app.bundle.js file from the transpilation with its associated app.bundle.map map file.