Angular.js: 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.

[TalGeffen]

I am experiencing the same issue with Chrome 49.0.2623.87 on both Windows and Mac.
The problem started appearing immediately after the upgrade of the browser

[lenichols]

:-( same thing... as soon as i made a change to mod rewrite .htaccess...

[dongorous]

Me too got this error ..

Failed to parse SourceMap: http://localhost:8079/bower_components/angular-route.min.js.map

[jdanielcmedina]

You need removethis (similar), I removed im my underscore file and dont show the error again.
//# sourceMappingURL=underscore-min.map

[m-ret]

I got this error today and as @jdanielmedina mentioned above, you should go the file giving you the error. Actually the error in my project was coming directly from the Angular file.

Something like this:

Failed to parse SourceMap: http://localhost:3000/vendors/angular.min.js.map

or it could be

Failed to parse SourceMap: http://localhost:3000/vendors/angular-strap.min.js.map

and so on, it is not happening only with one file in specific, it is happening with every file containing, something like this at the end of the files ending with .min.js

So, go to the file where the issue is coming and look for

//# sourceMappingURL=HERE THE NAME OF THE FILE (//# sourceMappingURL=underscore-min.map)
or //# sourceMappingURL=angular.min.map etc etc and just remove that line, which is actually the last line in that file and its a commented line.

[Narretz]

It doesn't look like this is an angular issue, so I'm closing this. But feel free to continue the discussion.

[subhashchand]

Failed to parse SourceMap: https://mydomain/js/vendor/jquery.min.map
Failed to parse SourceMap: https://mydomain/css/bootstrap.min.css.map

[subhashchand]

plz suggest a solution

[ReallyUglyDogFace]

This thread came up on google.

The problem may be that the generation of the map files is being saved as Unicode (UTF-8 with Signature) as the file's Encoding. Google does not know how to read the file, thus, the error.

I'm able to change the Encoding to Unicode (UTF-8 without Signature) and Google reads this correctly. The likely source is the minifier or the css compiler's output into the UTF-8 with Signature format.

Hopefully Google fixes this in a future release.