Angular: Source map error; TypeError: ctx.formData is undefined

Question

In an Angular project, I usually don't see an error in the browser console when I load the project. But when I add projects > project-name > architect > build > options > "optimization": false to angular.json, in order to disable javascript minification, I then see the following two errors:

(1) When the app is loaded:

Source map error: Error: request failed with status 404
Resource URL: http://localhost:4200/main.js
Source Map URL: ngx-echarts.mjs.map

(2) And when I try using the app, I am getting this error:

ERROR TypeError: ctx.formData is undefined
...
globalZoneAwareCallback http://localhost:4200/polyfills.js:12156

This code seems to be:

var globalZoneAwareCallback = function (event) {
  return globalCallback(this, event, false);
}; // global shared zoneAwareCallback to handle all event callback with capture = true

...

As for error (1), from what I read in another answer, I need to enable source maps in my browser (Firefox). As far as I can see source maps is enabled, but I'm still getting this error. So how can I get the original non-minified version of the script?

As for error (2), I could not find out why this error is thrown. Why is this error thrown only when javascript minification is disabled?

Jimmy · Accepted Answer · 2022-11-26 18:58:44Z

Minifying code is the process where first it renames all the variables and concatenate all scripts.
Let say you have this snippet code:

let a = 1
b = a + 1

The code runs just fine, but with minify, it strips out all space, line break... Then the code become this:

let a=1b=a+1

This is not a valid javascript anymore => Error only happens with minified code

Source map is what helps you link your minified code to the source code. It helps you easier to debug when developing in your local computer, or even production code, where you have minified code only. But that's another story.
Bottom line is SourceMap won't help you fix any error, the error still shows up, but SourceMap helps you read the code easier.

To know where's the problem occurs, it requires your debug technique, set a breakpoint, trace down the code, or "pause on exception"... Many techniques, if you don't know what a breakpoint is or never use that pause on exception feature then in order to fix the problem in your app, you need to learn how to debug JS code.

Collectives™ on Stack Overflow

Angular: Source map error; TypeError: ctx.formData is undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related