Angular SourceMap fails to load: “DevTools can’t show authored sources”

I have an Angular project that uses 3rd party software, from NGX Lightning. When I run the project in Chrome, and look through the Sources tab in the developer tools, I can only see the compiled main.js file (and other stock Angular files like styles.js), and not the original Angular .ts files.

At the bottom of the window for main.js it says “Source map failed to load”. If I (SHOW MORE) it then elaborates:

DevTools can’t show authored sources, but you can debug the deployed code.

Error loading url (url to ngx-toastr.mjs.map) HTTP error: status code 404, response code failure

The map file IS there, so I’m not getting sidetracked about the 404. It’s that whole “authored sources” error. I haven’t seen anyone talk about that.

How do I get Chrome to use my main.js.map file when it references a 3rd party “authored source” ?

I’ve looked for anything about “authored sources” or how to skip the source for that one library — I don’t care about debugging it, I want to debug the MAIN code of MY project.

  • Maybe the issue is somewhere within the configuration file angular.json where you have ` “sourceMap”: false` on dev mode or similar?

    – 

  • No, if there was no sourceMap, I wouldn’t have the error saying it could not use the dependent file’s “authored” source map

    – 

Leave a Comment