Angular Source Map Generation and Usage

This challenge focuses on understanding and implementing source maps within an Angular application. Source maps are crucial for debugging, allowing developers to inspect their original TypeScript code even when running the compiled JavaScript. You will learn how to generate, locate, and utilize source maps effectively in an Angular project.

Problem Description

Your task is to demonstrate how source maps are generated and used in an Angular application. This involves configuring the Angular build process to include source maps and then verifying their functionality by debugging a simple scenario.

What needs to be achieved:

1. Configure Angular Build for Source Maps: Ensure that when you build your Angular application in development mode, source maps are generated alongside the JavaScript files.
2. Locate Source Maps: Understand where these generated source maps (.js.map files) are placed relative to their corresponding JavaScript files.
3. Verify Source Map Functionality: Use browser developer tools to confirm that source maps are correctly linked and allow you to debug your original TypeScript code.

Key Requirements:

• The Angular project should be set up to generate source maps for development builds.
• You should be able to set breakpoints in your original .ts files within the browser's developer tools.
• When a breakpoint is hit, the developer tools should display the original TypeScript code, not the compiled JavaScript.

Expected Behavior:

When debugging the application in a browser (e.g., Chrome, Firefox), stepping through the code or inspecting variables should show line numbers and code corresponding to the original TypeScript source files.

Important Edge Cases to Consider:

• Production Builds: While this challenge focuses on development, briefly consider how source map generation differs for production builds (often disabled or used cautiously).
• Build Tools: Understand that Angular CLI handles source map generation for you, but knowing the underlying principles is valuable.

Examples

Example 1:

Scenario: A simple Angular component with a button that increments a counter.

Steps:

1. Create a new Angular project using the Angular CLI: ng new source-map-demo
2. Navigate into the project: cd source-map-demo
3. Locate the src/app/app.component.ts file.
4. Add a simple counter variable and a method to increment it, triggered by a button in app.component.html.
5. Run the development server: ng serve
6. Open the application in a browser and open the developer tools (F12).
7. Navigate to the "Sources" tab. You should see your project's file structure.
8. Find app.component.ts and set a breakpoint on the line where the counter is incremented.
9. Click the button in the application.

Expected Output (in Developer Tools):

• When the breakpoint is hit, the developer tools will highlight the line in app.component.ts corresponding to the counter increment.
• You will be able to inspect the counter variable and see its current value.
• The call stack will show the execution flow originating from your TypeScript code.

Example 2:

Scenario: Inspecting the generated output.

Steps:

1. After running ng serve (or performing a ng build --configuration development), navigate to your project's output directory (typically dist/source-map-demo/ or similar, depending on Angular version and build configuration).
2. Examine the JavaScript files (e.g., main-es2022.js or similar, depending on your Angular version and compilation target).
3. Look for corresponding .js.map files with the same base name.

Expected Output (Filesystem):

You will find pairs of files:

• main-es2022.js (or equivalent JavaScript file)
• main-es2022.js.map (the source map file)

These .js.map files are crucial for the browser to map the compiled JavaScript back to the original TypeScript.

Constraints

• Angular Version: Use a recent, stable version of Angular (e.g., Angular 15+).
• Build Configuration: Focus on the default development build configuration provided by the Angular CLI.
• Browser: The verification should be demonstrable in modern web browsers like Chrome, Firefox, or Edge.
• No Manual Source Map Generation: You are not expected to write custom source map generation logic. The goal is to leverage Angular CLI's capabilities.

Notes

• The Angular CLI automatically configures source map generation for development builds when you run ng serve or ng build --configuration development. You usually don't need to manually edit angular.json for this basic setup.
• Source maps contain information about the original file names, line numbers, and column numbers.
• When debugging, ensure your browser is configured to use source maps (this is typically enabled by default).
• For production builds, source maps are often disabled ("sourceMap": false in angular.json for the production configuration) or configured to be uploaded to a separate debugging service to avoid exposing your source code.
• Pay attention to the Source Maps section within your browser's developer tools settings.