Failed to parse SourceMap: angular-animate/angular-animate.min.js.map

[benams]

Hi,
I use bower to include angular-animate in my project. It used to work fine, but in one of my app's latest versions I can see the error above in the chrome DevTools console.
How can I debug such an issue? (I will provide any information about my app if it's needed)

[petebacondarwin]

The source map is a debug file that is used by the browser to display the original source code when stepping through the code. This error implies that the file is missing or invalid. Can you confirm what version of Angular you are using and whether the file is available on your server?

[benams]

@petebacondarwin
I use AngularJS v1.5.0
The map is available on the server.

[petebacondarwin]

I am not sure why you are getting the error. If the file can be accessed from the browser and it is located next to the minified file then the error should not appear. Have you checked that the file is not being corrupted in some way, perhaps by your server or build process?

[thirdy]

Same here, I get this error for angular-scroll:

Failed to parse SourceMap: http://localhost:8079/assets/js/angular-scroll.min.js.map

I'm no web-dev, but here's a screenshot that might help:

Our project is open source:
https://github.com/exiletrade/exiletrade

[petebacondarwin]

@thirdy - the problem in your case is that you are using gulp to copy (and uglify) the Angular library code, which has already been minified. See https://github.com/exiletrade/exiletrade/blob/master/gulpfile.js#L177

The trouble with this approach is that you are not taking the sourceMaps context information into account. You are, effectively, concatenating all the library files together into a single file.

But these library files contain information about their original source code, via special comments in the source (e.g. //# sourceMappingURL=angular.min.js.map). When you are processing files in this way, you need to be are of this.

I think in your case it might work for you to simply ensure that the *.js.map files are copied to your distribution folder along with your build output. They are all available in the bower_components/angular_.../... folders.

[thirdy]

@petebacondarwin thanks for the feedback. I tried solving this but after an hour, it became apparent that I can't get away with not understanding gulp. Your suggestion of copying the .map files worked but another error popped up. When I can, I'll try this again by slowly learning setting up a build config from scratch (note that our project used foundation for apps which generated the project for us). I should also at least try having to manually run these tools like "uglify" which I've only heard of now. (note that I'm no web dev).

Again thanks

[richerlariviere]

I got the same problem with Chrome v49.0.2623.87. The moment I upgraded it, I've experienced those problems and I don't think it is related to angular specifically since I have non-angular map files having the same problem.

[esetnik]

I'm having the same issue occur suddenly. It could be a chrome bug I guess.

[petervavro]

The same here :)

[ronbrogan]

I would tend to agree. I've been working on a project for months an this sprang up the other day for me as well, out of no where.

[psalaets]

This same error just started happening in one of my projects.

Problem was that we were serving gzipped sourcemaps without the Content-Encoding: gzip response header.