Angular tooling

One of the reasons that the Angular framework is popular among developers is the rich ecosystem of available tools. The Angular community has built amazing tools to complete and automate various tasks, such as debugging, inspecting, and authoring Angular applications:

• Angular DevTools
• VSCode Debugger
• VSCode Profiles

We will learn how to use each in the following sections, starting with Angular DevTools.

Angular DevTools

Angular DevTools is a browser extension created and maintained by the Angular team. It allows us to inspect and profile Angular applications directly in the browser. It is currently supported by Google Chrome and Mozilla Firefox and can be downloaded from the following browser stores:

• Google Chrome: https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh
• Mozilla Firefox: https://addons.mozilla.org/firefox/addon/angular-devtools

To open the extension, open the browser developer tools and select the Angular tab. It contains three additional tabs:

• Components: Displays the component tree of the Angular application
• Profiler: Allows us to profile and inspect the Angular application
• Injector Tree: Displays the services provided by the Angular application

In this chapter, we will explore how to use the Components tab. We will learn how to use the Profiler tab in Chapter 3, Structuring User Interfaces with Components, and the Injector Tree tab in Chapter 5, Managing Complex Tasks with Services.

The Components tab allows us to preview the components and directives of an Angular application and interact with them. If we select a component from the tree representation, we can view its properties and metadata:

Figure 1.3: Component preview

From the Components tab, we can also look up the respective HTML element in the DOM or navigate to the actual source code of the component or directive. Clicking the < > button will take us to the TypeScript file of the current component:

Figure 1.4: TypeScript source file

Double-clicking a selector from the tree representation of the Components tab will navigate us to the DOM of the main page and highlight the individual HTML element:

Figure 1.5: Main page DOM

Finally, one of the most useful features of the component tree is that we can alter the value of a component property and inspect how the component template behaves:

Figure 1.6: Change component state

In the preceding image, you can see that when we changed the value of the title property to Angular World, the change was also reflected in the component template.

VSCode Debugger

We can debug an Angular application using standard debugging techniques for web applications or the tooling that VSCode provides out of the box.

The console object is the most commonly used web API for debugging. It is a very fast way to print data and inspect values in the browser console. To inspect the value of an object in an Angular component, we can use the debug or log method, passing the object we want to inspect as a parameter. However, it is considered an old-fashioned approach, and a codebase with many console.log methods is difficult to read. An alternate way is to use breakpoints inside the source code using the VSCode debug menu.

VSCode contains a built-in debugging tool that uses breakpoints to debug Angular applications. We can add breakpoints inside the source code from VSCode and inspect the state of an Angular application. When an Angular application runs and hits a breakpoint, it will pause and wait. During that time, we can investigate and inspect several values involved in the current execution context.

Let’s see how to add breakpoints to our sample application:

1. Open the app.component.ts file and click on the left of line 11 to add a breakpoint. A red dot denotes breakpoints:

Figure 1.7: Adding a breakpoint

2. Click on the Run and Debug button in the left sidebar of VSCode.
3. Click on the play button to start the application using the ng serve command:

Figure 1.8: Run and debug menu

VSCode will build our application, open the default web browser, and hit the breakpoint inside the editor:

Figure 1.9: Hitting a breakpoint

We can now inspect various aspects of our component and use the buttons in the debugger toolbar to control the debugging session.

Another powerful feature of VSCode is VSCode Profiles, which help developers customize VSCode according to their development needs.

VSCode Profiles

VSCode Profiles allows us to customize the following aspects of the VSCode editor:

• Settings: The configuration settings of VSCode
• Keyboard shortcuts: Shortcuts to execute VSCode commands with the keyboard
• Snippets: Reusable template code snippets
• Tasks: Tasks that automate the execution of scripts and tools directly from VSCode
• Extensions: Tools that enable us to add new capabilities in VSCode, such as languages, debuggers, and linters

Profiles can also be shared, which helps us maintain a consistent development setup and workflow across our team. VSCode contains a set of built-in profiles, including one for Angular, that we can further customize according to our development needs. To install the Angular profile:

1. Click the Manage button represented by the gear icon at the bottom of the left sidebar in VSCode and select the Profiles option.
2. Click on the arrow of the New Profile button and select the From Template | Angular option.
3. Click the gear button if you want to select a custom icon for your profile.
4. Click the Create button to create your profile.

VSCode will automatically apply the new profile after it has been created successfully.

In the following sections, we will explore some of the extensions in the VSCode Angular profile.

Angular Language Service

The Angular Language Service extension is developed and maintained by the Angular team and provides code completion, navigation, and error detection inside Angular templates. It enriches VSCode with the following features:

• Code completion
• A go-to definition
• Quick info
• Diagnostic messages

To get a glimpse of its powerful capabilities, let’s look at the code completion feature. Suppose we want to display a new property called description in the template of the main component. We can set this up by going through the following steps:

1. Define the new property in the app.component.ts file:

   export class AppComponent {
     title = 'my-app';
     description = 'Hello World';
   }
   

2. Open the app.component.html file and add the property name in the template using Angular interpolation syntax. The Angular Language Service will find it and suggest it for us automatically:

Figure 1.10: Angular Language Service

The description property is a public property. We can omit the keyword public when using public properties and methods. Code completion does not work for private properties and methods. If the property had been declared private, then the Angular Language Service and the template would not have been able to recognize it.

You may have noticed that a red line appeared instantly underneath the HTML element as you typed. The Angular Language Service did not recognize the property until you typed it correctly and gave you a proper indication of this lack of recognition. If you hover over the red indication, it displays a complete information message about what went wrong:

Figure 1.11: Error handling in the template

The preceding information message comes from the diagnostic messages feature. The Angular Language Service supports various messages according to the use case. You will encounter more of these messages as you work more with Angular.

Material Icon Theme

VSCode has a built-in set of icons to display different types of files in a project. The Material Icon Theme extension provides additional icons that conform to the Material Design guidelines by Google; a subset of this collection targets Angular-based artifacts:

Figure 1.12: Material Icon Theme

Using this extension, you can easily spot the type of Angular files in a project, such as components, and increase developer productivity, especially in large projects with many files.

EditorConfig

VSCode editor settings, such as indentation or spacing, can be set at a user or project level. EditorConfig can override these settings using the .editorconfig configuration file, which can be found in the root folder of an Angular CLI project:

# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
trim_trailing_whitespace = false

You can define unique settings in this file to ensure the consistency of the coding style across your team.