angular-cli: Debugging not working well in Webpack Branch

Is this issue back in beta 18? I created a new project this morning (ng new testproject) and changed only the following code in app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends OnInit {
  ngOnInit(): void {
    this.dosomething();
  }

  title = 'app works!';

  dosomething() {
    this.title = "trying to do something";
    this.title = "trying to do something else";
  }
}

In chrome dev tools, breakpoint doesn’t seem to match the scope

I’ve also tested in my other projects which i’ve updated to beta.18 with the same issue.

ng --version: angular-cli: 1.0.0-beta.18 node: 6.8.1 os: darwin x64

running: Npm: 4.0.0 OSX: 10.12.1 Chrome: 54.0.2840.71

I’ve noticed this actually. If I place a breakpoint inside a mapped TS file, the breakpoint will move up the file about 10-20 lines above and obviously not work. It seems the maps aren’t quite correctly generated

You can see more information about how webpack processes sourcemaps are configured here and what the tradeoffs are

Some issue on Chrome dev tools side, AFAIK

instead of reverting you could use this patchy fix from issue #2811 : Edit node_modules/angular-cli/models/webpack-build-development.js and change cheap-module-source-map to source-map

We’re still investigating sourcemaps on prod and dev modes though.

The issue isn’t the coverage itself. Coverage is OK in master branch. The problem is the instrumented code, when you debug the tests on karma http://localhost:9876/debug.html. All the application code will look like this:

If i just comment out this part of node_modules/angular-cli/addon/ng2/models/webpack-build-test.jswebpack-build-test.js:

    //   postLoaders: [
    //     {
    //       test: /\.(js|ts)$/, loader: 'sourcemap-istanbul-instrumenter-loader',
    //       exclude: [
    //         /\.(e2e|spec)\.ts$/,
    //         /node_modules/
    //       ],
    //       query: { 'force-sourcemap': true }
    //     }
    //   ]
    // },

And run karma again, so i will be capable of debug the code:

But obviouslly i won’t have any coverage data :

My proposal is to have two different tasks:

• ng test which will allow run the tests without coverage allowing to debug the application source code;
• ng test-coverage, which will run tests and generate the coverage reports;

I would try make this changes and submit a merge request.

I have also noticed that console errors point to lines far from where the actual error occurred

I believe this is a Typescript-mapping problem only. Mapping onto Javascript files (e.g. node dependencies) work fine.