Angular-cli: Incorrect line numbers in sourcemaps

[dballance]

OS?

Windows 10

Versions.

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

Checked a beta.17 project, does not appear to occur there. Lines seem to be correct for debugging.

Repro steps.

• ng new source-map
• cd source-map
• ng serve
• Open src/app/app.component.ts and add some testing code

export class AppComponent {
  title = 'app works!';

  ngOnInit(){
    let value = true;
    if (value){
      value = false;
    }
  }
}

• Open devtools (tested in Chrome)
• ctrl+p and open app.component.ts
• Set breakpoint on line 12 (let value = true) and line 14 (value = false)
• Refresh page
• Hit breakpoint on line 12, notice call stack is outside ngOnInit even though breakpoint is within
• Hit breakpoint on line 14, notice call stack is within ngOnInit but value = undefined
• Step and see code execute as expected, but highlighted line to be shifted by a few lines
  

  Other useful info

Seems to shift by ~ 5 lines in my local project, not sure if it is the same shift in the repro (repro shift looks like 3?). Shift can be seen in VS Code Chrome Debugging - where line numbers are given for the mappings.

Maps 48991 (actual line in main.bundle.js that breakpoint is set to in vscode) to 48986 (where the breakpoint actually is during runtime)

[dballance]

I believe this may be related to use of cheap-module-source-map change from #2619 and since it is happening in Chrome, without vscode debugging, figured it warranted another issue.

[SebastianSchenk]

I have also issues with debugging and breakpoints since beta.18. Breakpoints are jumping sometimes (click on line 15, jumps to line 19) and execution doesn't stop at breakpoint.

[rob3c]

Btw it looks like there's a "help wanted" issue in the webpack 2 repo for trying to audit and fix source-maps:
https://github.com/webpack/webpack/issues/3165

[un33k]

I also confirm the line number issue in beta.18. A quick workaround for me was to update this file node_modules/angular-cli/models/webpack-build-development.js in my project and replace cheap-module-source-map to source-map. Takes much longer to compile, but line numbers are matching on breakpoints.

[chadbr]

Thanks @un33k

[istvanszoboszlai]

Works like charm and it is not even slower for me in a moderately complex project.

[radoslavpetranov]

I have the same problem and it was killing me trying to debug some issues. @un33k's fix worked like a charm - thanks heaps! And yeah - same here - I saw no noticable speed difference after the switch to source-map.

[Splaktar]

@filipesilva Changing back to source-map from cheap-module-source-map fixed this issue for me in Chrome DevTools on OS X.

[filipesilva]

Indeed my change has broken sourcemaps. My initial testing seemed to indicate it was fine, but it's not.

I'll keep an eye out for https://github.com/webpack/webpack/issues/3165 and see where it comes out.

[jmlivingston]

Huge thanks @un33k. Worked like a champ. Not being able to debug effectively was tough.

[dsm0880]

I'm glad I found this thread. Unfortunately this fix did not work for me or my team. We run on Windows 10 using vsCode. I changed the file as @un33k suggested but no go. Looking at the code that was checked in to fix this issue, it seems to be identical to what @un33k suggested, so I fear that the next release won't address the issue for some. Happy to provide more information to help find the root of the issue.

[emcpadden]

Thanks @un33k !!! You saved me from going insane :)

[un33k]

@dsm0880 Follow the ngCLI upgrade procedure one more time and ensure that you are not Working with master. Post your finding back.

[dsm0880]

Thanks @un33k, not sure if this was obvious or not but I had only changed the global version of this file. Reading your post again you said "in your project", so after fixing the local version of the angular-cli package it now works. Not sure if the changing the global file is even necessary. Anyways thanks! This made my day.

[un33k]

@dsm0880 The global version helps you type "ng" anywhere on the command line and the local version is what you really pin your project to. Something like that. :)

[zackarychapple]

This issue should get re-opened as it is the same as #2909

[Splaktar]

It is fixed in master and does not need to be reopened. The other issue is a duplicate.

[angular-automatic-lock-bot[bot]]

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._}