Debugging Angular Applications with Source Maps

Source maps are crucial for debugging Angular applications, especially when dealing with transpiled and bundled code. They allow developers to map the generated JavaScript code back to the original TypeScript source files, making it significantly easier to identify and fix errors in the development environment. This challenge focuses on configuring and verifying source map generation in an Angular project.

Problem Description

You are tasked with configuring a simple Angular project to generate and utilize source maps during development. The goal is to ensure that when errors occur in the browser's developer tools, the stack traces point back to the original TypeScript files, rather than the bundled JavaScript. You will need to modify the angular.json file to enable source map generation and then verify that source maps are correctly being generated and used when an error occurs. The project already has a basic component with a deliberate error to trigger the debugging process.

Key Requirements:

• Enable Source Maps: Modify the angular.json file to enable source map generation for the development build configuration.
• Verify Source Map Generation: Confirm that source map files (.map files) are being generated alongside the JavaScript bundles in the dist/your-project-name directory (or equivalent, depending on your project setup).
• Verify Source Map Usage: Introduce a deliberate error in a component's TypeScript file. Open the browser's developer tools, trigger the error, and confirm that the stack trace in the developer tools points to the original TypeScript file and line number, not the bundled JavaScript.

Expected Behavior:

• When the development server is running, source map files should be generated.
• When an error occurs in the browser, the developer tools should display a stack trace that references the original TypeScript source files and line numbers.
• The browser's developer tools should allow you to click on the TypeScript file and line number in the stack trace to navigate directly to the source code.

Edge Cases to Consider:

• Ensure source maps are not generated in production builds (this is a separate configuration, but good to be aware of). This challenge focuses solely on development.
• Verify that the source map files are correctly linked to the JavaScript bundles.
• Different browsers may display source maps slightly differently.

Examples

Example 1:

Input: Angular project with `angular.json` configured without source map generation.
Output:  Error in the browser console points to a bundled JavaScript file and line number. No source map files are present in the `dist` folder.
Explanation:  Without source map configuration, the browser cannot map the bundled code back to the original TypeScript.

Example 2:

Input: Angular project with `angular.json` configured to generate source maps in development. A deliberate error (e.g., `console.log(undefined.property)`) is present in a component's TypeScript file.
Output: Error in the browser console points to the original TypeScript file and line number. A `.map` file exists in the `dist` folder corresponding to the bundled JavaScript.
Explanation:  The source map allows the browser to map the error in the bundled JavaScript back to the original TypeScript source.

Constraints

• The Angular project is assumed to be a standard Angular CLI project.
• You are only modifying the angular.json file. No other code changes are required beyond introducing the deliberate error.
• The deliberate error should be easily reproducible and clearly indicate the source map is working correctly.
• The project should be configured to not generate source maps in production builds (although this is not explicitly tested in this challenge).

Notes

• The angular.json file controls the build configuration for your Angular project. Look for the build target and the development configuration within it.
• The sourceMap property within the build configuration controls source map generation. Set it to true for the development configuration.
• Consider using a simple component with a clear error message to easily verify the source map functionality.
• Inspect the browser's developer tools (usually by pressing F12) to view the stack trace and verify that it points to the original TypeScript source. Look for the "Sources" tab to see the generated source map files.