Angular-cli: Source maps does not work

[mmrath]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   OSX El Captain, Windows 7
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

latest master

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

https://github.com/mmrath/cli-proxy-test.git
Keep break points in app.component.ts from chrome. Chrome does not stop on the right place.

1. The log given by the failure. Normally this include a stack trace and some
   more information.
2. Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[filipesilva]

@TheLarkInn should your sourcemap solution have fixed this scenario?

[TheLarkInn]

This is a chrome issue I believe @mmrath can you do me a favor and try this in Chrome Canary just to make sure it's the issue I believe it is.

[mmrath]

@TheLarkInn I tried it in Chrome Canary, the behaviour is same. It still does not work.

Update: Chrome Version 54.0.2811.2 canary (64-bit)

[mmrath]

This could be related to https://github.com/webpack/webpack/issues/2145

[TheLarkInn]

Yup that was the issue I was looking for. I will be speaking with a few folks from Chrome next week (in the context of that issue and other stuff). I'll make sure to keep track of this and update accordingly.

[masaanli]

I can confirm this, having the same issue.

It only debugs if i add a debugger; in my code ;)

[mmrath]

@TheLarkInn Does not look like this issue is resolved. I have seen the commit #1659 . I took the latest master and created a new project added material2. Now ng serve is failing.

If I change to 'cheap-module-source-map' from 'source-map', ng serve is OK, but debugging does not work.

Sample repo to reproduce is at https://github.com/mmrath/test-cli-source-map.git

ng serve throws the following error with latest master. I see the same error even on osx

TypeError: Cannot read property 'substr' of undefined
at Function. (C:\Projects\angular-clinode_modules\webpack-sourcesnode_modules\source-map\lib\source-node.js:95:30)
at Array.forEach (native)
at SourceMapConsumer_eachMapping as eachMapping
at Function.SourceNode_fromStringWithSourceMap as fromStringWithSourceMap
at SourceMapSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\SourceMapSource.js:42:20)
at ReplaceSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\ReplaceSource.js:66:29)
at CachedSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\CachedSource.js:12:23)
at C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:40:49
at Array.map (native)
at ConcatSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:39:60)
at C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:40:49
at Array.map (native)
at ConcatSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:39:60)
at C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:40:49
at Array.map (native)
at ConcatSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:39:60)
at C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:40:49
at Array.map (native)
at ConcatSource.node (C:\Projects\angular-clinode_modules\webpack-sources\lib\ConcatSource.js:39:60)
at ConcatSource.proto.sourceAndMap (C:\Projects\angular-clinode_modules\webpack-sources\lib\SourceAndMapMixin.js:28:18)
at CachedSource.sourceAndMap (C:\Projects\angular-clinode_modules\webpack-sources\lib\CachedSource.js:51:28)
at Compilation. (C:\Projects\angular-clinode_modules\webpack\lib\SourceMapDevToolPlugin.js:57:32)

[masaanli]

Source maps are working after your commit @TheLarkInn at least at my place.
Here they are working again in Firefox and Chrome an IE. Before it wasn't working in the 3 Browsers.

[mmrath]

@masaanli any chance you can try the repo I mentioned in the previous comments. It would be good to if it is just me. I tried in on both my windows and Mac

[filipesilva]

Reopening to investigate @mmrath's report.

[ValeryVS]

@mmrath I have got the same
Cannot read property 'substr' of undefined
error with your repository, and it is appears with material2
Without material2, "ng serve" works properly.

Also, not all of material2 modules trigger this error. If you import just some of them project will compile.

Also, source maps are wrong with ng2-bootstrap v1.0.24

But @ng-bootstrap/ng-bootstrap 1.0.0-alpha.2 works well.

[ValeryVS]

May be this is an issue with precompiled source maps in some material2 and ng2-bootstrap modules.
Or with the way of handling these maps by angular cli

[filipesilva]

@mmrath it took me a while to get back to this, apologies. I tried with the latest angular-cli@webpack and [email protected] and I got no errors.

I think this was due to buggy source maps on these libs before. For instance, a while ago all the sourcemaps the CLI generated were themselves broken. In this case, the best we can do is to ignore them since it broken sourcemaps there is no way to accurately debug the source.

[dancancro]

I don't know whether it has the same cause but source maps are not working in my project either. I'm using [email protected] and @angular/[email protected]

[filipesilva]

@dancancro there was a regression in beta.18 with sourcemaps, upgrading to beta.19-3 should fix it.

[dancancro]

Thank you. It looks like that fixed it.

[doliver3]

This error is occurring in "angular-cli": "1.0.0-beta.21"

[filipesilva]

@doliver3 can you tell me how you repro'd it?

[jstaffans]

I also have this problem running angular-cli 1.0.0-beta.24. It only occurs when running ng serve or ng build in a Docker container, though. Workaround is to disable sourcemaps (--no-sourcemap).

[JSMike]

For docker users. Are your node_modules being shared from the host machine? there may be an issue with how docker follows the sym-links in your mounted directories. Look into installing node_modules with --no-bin-links

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