For some angular app architectures, breakpoints don't get bound to vs code debugger (using the recommended JS debugger), mostly to do with settings and sourcemapPathOverrides. E.g. when debugging test files in library project outside of main src/ folder, or in module federation when debugging any of the apps in their src/ paths and also the karma tests files.
Is there a methodical way of identifying the sourceMapPathOverrides for an angular 13(+) micro frontend architecture? I'm looking for an answer for launching the debugger for the apps in vs code and also for attaching the debugger to the karma test runner.
A good answer should have the following for each of the two above scenarios:
- The main launch.json settings needed.
- How to identify sourceMapPathOverrides
- Any other configuration needed in other files such as karma.config.json, tsconfig.json etc.
I've spoken to so many devs about this, and everyone seems to have a similar problem in attaching the debugger properly in various angular architectures and folder structures so I'm hoping this will help a lot of other people too.
I've tried following the examples in the vs code github but they don't cover the scenarios above. Nor do they explain how things work internally so as to try and figure it out myself.