Debugging not working well in Webpack Branch

Please provide us with the following information:

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 10
Versions. Please run ng --version. If there's nothing outputted, please run
in a Terminal: node --version and paste the result here:
Beta 10 (webpack / master branch)
Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.
The log given by the failure. Normally this include a stack trace and some
more information.

5. Mention any other details that might be useful.

Thanks! We'll be in touch soon.

The debugging isnt working anymore in firefox, chrome or edge.

When I put a breakpoint nothing happens.
When I put a debugger command, it's debugging at strange lines. not where I put the debugger command.

Some issue on Chrome dev tools side, AFAIK

@sirajc

@sirajc It's also not working in Firefox for me.
It isn't very easy to work with now hehe;)
With beta 10 from NPM (SystemJS) It was working previous week ;)

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

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

@TheLarkInn

@TheLarkInn Can you have a look please

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

Tried to update to the latest Angular CLI Beta 11 Webpack, (NPM) but not worked.

Actually, for me it's sometimes not working properly even before upgrading to webpack (using PhpStorm)

@Namek

@Namek Do you mean the Webpack Branch or just the Masterbranch where Webpack is inside?

@TheLarkInn

I just looked again at this issue and to be more specific; I'm having the same problem on Firefox and Internet Explorer.

@TheLarkInn got some progress on this one?

Yesterday I didn't even touch anything related to webpack in this project. Maybe my webstorm is broken.

Actually the problem is being caused by the sourcemap-istanbul-instrumenter-loader which was setup to always instruments the typescript app code in the webpack-build-test.js. Would be better to have a task specific for coverage where the instrumentation would take place. The test tasks will run without instrumentation so we could debug it.

We did just cut a new release on the webpack tag this morning with improved coverage settings. Would you mind just double checking if mappings work on prod and dev.

@TheLarkInn

@TheLarkInn going to check it today!

Using a webpack config is only one of may ways to use webpack. It also can be invoked through node using the webpack nodeAPI which we do

@TheLarkInn

@TheLarkInn sorry for me being an asshole, but I'm new to Webpack. Need some guide on this how to acchieve applying this setting, so debugging is working. Sorry.

if we add an arg --debug on ng test tasks we could conditionally not add the instrumenter plugin and not generate the coverage reports (because without the instrumenter the coverage info isn't generated).
This way we would debug on tests also!

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

Happening for me too. Source maps seem to be out by only a few lines, so breakpoints are out too (ridiculous workaround: surround breakpoint with lots of superfluous lines)

angular-cli: 1.0.0-beta.18
node: 6.7.0
os: win32 x64

NPM: 3.10.8
OS: Windows 10 x64
Chrome: 54.0.2840.71 m (64-bit)

@sherwopj

I am getting this debug/mapping mal-config problem too (same as @sherwopj). The debugging was working fine for a while, but after my app got to a critical mass (like around 20 components) it has started to get wonkie: breakpoints won't hit, or impossible to set breakpoint (off by x number of lines)

@nukuuk was it working fine with beta18?
We just migrated our app to use angular-cli and are suffering with this annoying issue. I tried downgrading to beta17 but other errors arose

@fcrocce

@fcrocce it was working ok with beta18 for a while, until my app reached a critical mass of components (around 25), then debugging got wonky

reverting to beta17 did the trick for me

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

The issue was back on beta18, fixed on beta19-3 in #2857.

I'm still seeing this

➜ web git:(master) ✗ ng -v
angular-cli: 1.0.0-beta.19-3
node: 6.7.0
os: darwin x64

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Debugging not working well in Webpack Branch #1519

Please provide us with the following information:

do on your code? etc.

more information.

5. Mention any other details that might be useful.

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Debugging not working well in Webpack Branch #1519

Description

Please provide us with the following information:

do on your code? etc.

more information.

5. Mention any other details that might be useful.

Activity

sirajc commented on Aug 2, 2016

masaanli commented on Aug 3, 2016

intellix commented on Aug 3, 2016

jmc265 commented on Aug 4, 2016

sirajc commented on Aug 4, 2016

iamyojimbo commented on Aug 7, 2016

masaanli commented on Aug 8, 2016

Namek commented on Aug 9, 2016

masaanli commented on Aug 9, 2016

masaanli commented on Aug 9, 2016

Namek commented on Aug 9, 2016

abner commented on Aug 11, 2016

TheLarkInn commented on Aug 11, 2016

masaanli commented on Aug 11, 2016

8 remaining items

TheLarkInn commented on Aug 12, 2016

masaanli commented on Aug 12, 2016

abner commented on Aug 12, 2016

EricBichara commented on Oct 26, 2016

sherwopj commented on Oct 28, 2016

brendanalexdr commented on Oct 28, 2016

fcrocce commented on Oct 28, 2016

brendanalexdr commented on Oct 28, 2016

fcrocce commented on Oct 28, 2016

ugacode commented on Oct 30, 2016

filipesilva commented on Nov 3, 2016

rightisleft commented on Nov 18, 2016

angular-automatic-lock-bot commented on Sep 6, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions