Using VS Code and Angular, I am trying to run my application in development mode in such a way that when I open the browser developer tools I am able to review the source code in it’s unbundled/unminified form.
From the package.json:
"start": "ng serve my-fancy-application --configuration development"
I notice a couple of things:
- Terminal output
$ npm run start
> [email protected] start
> ng serve my-fancy-application --configuration development
⠋ Generating browser application bundles (phase: setup)... TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular
CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 11.88 MB |
main.js | main | 5.96 MB |
styles.css, styles.js | styles | 1.25 MB |
polyfills.js | polyfills | 642.88 kB |
scripts.js | scripts | 152.96 kB |
runtime.js | runtime | 7.20 kB |
| Initial Total | 19.87 MB
As you can see the application gets bundled into a main.js.
Browser application bundle generation complete.
Debugging is a little more challenging because I have to search though a giant main.js with lots of minification, module bundling, and scope hoisting.
Is there some other step I am missing to ensure these optimizations are skipped so that when I open my browser inspector, the source tab contains the original unmodified source code, and project structure?
SCREEN SHOT OF BROWSER INSPECTOR/SOURCE TAB