0

I relatively new to Angular and trying to use chrome dev tools for debugging. However I'm stuck with the problem that only the lazy loading modules show up in file tree (sources tab of chrome dev tools), but none of the eager loading modules. In addition I get quite a few 404s in the server console, like

"GET /runtime.js.map" Error (404): "Not found" 
"GET /es2015-polyfills.js.map" Error (404): "Not found" 
"GET /polyfills.js.map" Error (404): "Not found" 
"GET /main.js.map" Error (404): "Not found"

Not sure if those are related.

Looks like the sourcepaths comments in the js files are correct (e.g. //# sourceMappingURL=main.js.map). However as its an app in transition from native js to Angular there are two folders with uglyfied js files (and maps). Nevertheless it works for the lazy loading modules, but not the "normal" eager loading ones.

"sourceMaps": true,
"sourceMapPathOverrides": {
  "webpack:/*": "${webRoot}/*"
}

Any hint/info that helps me in fixing this issue would be highly welcome. If additional info on the setup is required, pls. come back to me.

Angular CLI version:

Angular CLI: 8.3.23
Node: 10.16.3
OS: linux x64
Angular: undefined
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.23 (cli-only)
@angular-devkit/core         8.3.23 (cli-only)
@angular-devkit/schematics   8.3.23 (cli-only)
@schematics/angular          8.3.23 (cli-only)
@schematics/update           0.803.23 (cli-only)
rxjs                         6.3.3
Dschuli
  • 309
  • 3
  • 10

1 Answers1

0

Solved the problem with help from a colleague. Apparently a jQuery script loading was causing the problem. After changing that to another loading option (as detailed in How do I include a JavaScript file in another JavaScript file? all TypeScript files were accessible in Chrome dev tools for debugging (under the Webpack file tree).

Code that caused the problem: 

$.getScript('../../path-to/main.js'

Code that fixed the problem:

function dynamicallyLoadScript(url) {
   var script = document.createElement('script'); // create a script DOM node
   script.src = url; // set its src to the provided URL
   document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
   }
   dynamicallyLoadScript('path-to/main.js');
Dschuli
  • 309
  • 3
  • 10