_edited_edited.png)
Angular is a TypeScript-based, free, open-source single-page web application framework run on Node.js(Wikipedia) that offers a strong toolkit and features for building dynamic and scalable web applications.
A better understanding of the project structure is crucial when working with Angular Projects. Here’s an overview of the standard Angular project structure:
An Angular workspace can contain one or more projects. A project can be a standalone application or a shareable library. If you want to create a new workspace you can use the ng new command that will create a new workspace with a root-level application (usually named after the workspace). Supporting workspaces with multiple projects is an advanced-level feature of Angular.
Here are some Root-Level Files and Folders:
.angular: this directory in an Angular project works as a cache for development build information.
.vscode: In Visual Studio Code, the .vscode folder contains settings, extensions, and launch configurations. Especially, the extensions.json file instructs VSCode to recommend loading the Angular Language Service extension. Also, all collaborators working on the project will get access to any other shared settings and extensions placed in this folder.
nodu_modules: For external modules that your project depends on, the node_modules subdirectory in an Angular project acts as a cache. Libraries that you download with npm install are kept in this folder. When importing these dependencies, Node.js searches for them without needing a path to be specified.
src: This folder serves as the project’s root directory which contains all the source files and resources needed to develop an Angular application. Developers spend most of their time writing and editing code in the src folder, which serves as a primary hub for all of the application's components and resources. Inside the src folder of an Angular project, you’ll normally find the following subdirectories:
app: The main code for your Angular app will be here and this is where all your created components, services, and modules of your application will display.
assets: Contains static files like images, fonts, and other resources your app might need.
environments: Holds environment-specific configuration files (e.g., environment.prod.ts, environment.ts) for different build environments (development, production, etc.).
styles: Includes global styles (CSS or SCSS) that apply to your entire app.
index.html: The main HTML file that works as the entry point for your Angular app.
main.ts: The TypeScript file that bootstraps your Angular application.
polyfills.ts: Imports necessary polyfills for browser compatibility.
test.ts: Used for configuring testing environments.
.editorconfig: Configuration for code editors.
.gitignore: Specifies files Git should ignore.
README.md: Introductory documentation for the root application.
angular.json: CLI configuration for all projects in the workspace.
package.json: Configures npm package dependencies.
package-lock.json: Provides version information for installed packages.
tsconfig.app.json: The root tsconfig.json file holds base options for the entire TypeScript project.
Now let's see how to debug an Angular Project in VS Code.
There are 2 ways to debug your Angular project.
The first one is using the Chrome developer tool. Navigate to your app.component .ts file in the developer tool and put a breakpoint anywhere you want as shown in the above screenshot. As soon as you have a breakpoint, if you refresh the browser you can see that the breakpoint stops on that code and you can inspect your code. This is pretty straightforward; most developers are using this method these days.
But now I will explain the second way you can debug your code on VS Code. In the VS Code inside our project, we have a launch.json file. This file configures the debugger to attach to your Angular application. Open that file and you will see an 'Add Configuration' button in the right-hand corner. When you click that button you will be prompted with a dropdown to Configure Debug Environment. Select an environment of your choice. I am using Edge. You might need to change the port to what your app is running on, like, 4200. If you don't have a launch.json file already, click on the debug window on the left or press ctrl+shift+D. Once the debug window is opened, click on drop-down and select add configuration and this will create a launch.json file in the .vscode folder. Now follow the same steps as mentioned above to add debug configuration.
Now let's set a breakpoint.
To set a breakpoint in app.component.ts, click on the gutter to the left of the line numbers. This will create a breakpoint, which will be displayed as a red circle.
Now run your application giving the ng serve command.
Once the application is compiled successfully, select the launch Edge and click the start debugging button on the debug window. To get the Run and Debug window, select the Run and Debug icon in the Activity Bar on the side of VS Code(Ctrl+Shift+D). Once a debug session starts, the Debug toolbar will be visible on the top of the editor. The toolbar will have the options for:
Continue / Pause - F5
Step Over - F10
Step Into - F11
Step Out - Shift+F11
Restart - Ctrl+Shift+F5
Stop - Shift+F5
It will launch the browser and trigger the breakpoint. You can go through your source code (F10), investigate variables like AppComponent, and view the call stack for the client-side Angular application.
Variables can be viewed in the VARIABLES area of the Run and Debug view, or by hovering over their source in the editor. In the CALL STACK section, variable values and expression evaluation are based on the stack frame specified. Variables and expressions can also be evaluated and watched in the Run and Debug view's WATCH section(Debugging, code.visualstudio.com, Visual Studio Docs).
Summary
This blog explains the Angular project file and folder structure and demonstrates how to troubleshoot Angular in VS Code. The method described here applies to all languages supported by the VS Code editor. Happy Debugging!!