I'm using webstorm 2016.2, angular-cli, webpack2.
In the photo, I can't create a breaking point on lines 19,20,22,23.
When I create on line 21, the console does not print what I told him in line 19.

I'm seeing ts file that should be debugged but It seems I'm debugging other file or the js file that I do not have any access to.

I would like to debug the ts file if possible and if not, the js file.

angular-cli.json:

{

  project: {

    version: 1.0.0-beta.11-webpack.2,

    name: store-app-02

  },

  apps: [

    {

      main: src/main.ts,

      tsconfig: src/tsconfig.json,

      mobile: false

    }

  ],

  addons: [],

  packages: [],

  e2e: {

    protractor: {

      config: config/protractor.conf.js

    }

  },

  test: {

    karma: {

      config: config/karma.conf.js

    }

  },

  defaults: {

    prefix: app,

    sourceDir: src,

    styleExt: css,

    prefixInterfaces: false,

    lazyRoutePrefix: +,

    styles: [

      ../node_modules/bootstrap/dist/css/bootstrap.min.css

    ]

  }

}

tsconfig.json:

{

  compilerOptions: {

    declaration: false,

    emitDecoratorMetadata: true,

    experimentalDecorators: true,

    mapRoot: ./,

    module: es6,

    moduleResolution: node,

    outDir: ../dist/out-tsc,

    sourceMap: true,

    target: es5,

    typeRoots: [

      ../node_modules/@types

    ],

    types: [

      core-js

    ]

  }

}