JetBrains Rider 2023.3 Help

Angular

Angular is a popular framework for building cross-platform applications. JetBrains Rider provides support for Angular and helps you on every step of the development process – from creating a new Angular app and working on the components to debugging and testing it.

Before you start

  1. Download and install Node.js.

  2. Make sure the JavaScript and TypeScript and Angular and AngularJS required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to Managing plugins.

To open an application that is organized in a directory structure and does not have a solution file, press Ctrl+Shift+O or choose File | Open | Open… from the main menu, choose the root folder of the application, and click Select Folder.

Write and edit your code

Create Angular components

With JetBrains Rider, you can create Angular components in several ways:

Create a component using a predefined template

JetBrains Rider provides predefined live templates for creating Angular components, such as a-component, a-component-inline, and a-component-root.

Create an Angular component using a predefined code snippet

For more information about live templates, refer to Live templates.

To view a full list of predefined templates, open the Settings/Preferences dialog (Ctrl+Alt+S) , go to Editor | Live Templates, and expand the Angular node.

  1. In the editor, press Ctrl+J, select the appropriate template (for example, a-component) from the list, and then press Enter.

  2. JetBrains Rider generates a component stub, places the caret at a field with canvas, and waits for you to specify the component name there. As you type the component name, the name of the selector and the template URL are filled in automatically in accordance with the Angular Style Guide.

  3. If necessary, make the new component standalone using a the inspection pop-up.

    Make component standalone

Learn how to customize a template with variables from Using and Creating Code Snippets in WebStorm Blog.

Create a component folder

In JetBrains Rider, you can create a bunch of files for an Angular component in one action and even place them all in a separate folder. To do that, you need to use a file template with several child templates. When you create a file from the parent template, the related files from the child templates are generated automatically.

Suppose you want to create an example folder with a bunch of component files, for example, example.component.ts for logic, example.component.html for the template, and example.component.css for styles. You can create a file template with two parent templates so all the three files will be generated at once and placed in a separate folder.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S) , select Editor | File and Code Templates.

  2. First create a template for a TypeScript component file:

    1. In the Files tab, click the Add button (the Create Template button) on the toolbar.

      Add new template

      A new, Unnamed, template is added to the list.

    2. In the right-hand pane, specify the template name, let it be Angular Component, and component.ts as the file extension.

    3. In the File name field, type $NAME/$NAME.

    4. Optionally, add a code template, for example:

      /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
    Create parent template

    Click Apply.

  3. Create a child template for the related HTML file:

    1. Select the parent template Angular Component and click the Create Child Template File button the Create Child Template File on the toolbar.

      Add child template icon

      A child template is added below the Angular Component template.

    2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the component.html extension.

    Create child template: component.html

    Click Apply.

  4. Create a child template for the related Style Sheet.

    1. Select the parent template Angular Component and click the Create Child Template File on the toolbar. A child template is added below the Angular Component template.

    2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the component.css extension.

  5. Click OK to save the templates.

  6. Create the component files.

    From the context menu of the folder where you want to store the component files, select New | Angular Component. In the dialog that opens, specify the name that will be used for the folder and for the component files in it (example in this example).

    Create an Angular component from a multiple files template in a separate folder

Extract a component from a template

The Extract Angular component refactoring works by running ng generate component, taking schematic preferences inside your angular.json file into account.

  1. In an HTML template file, select the code fragment that you want to extract into an Angular component.

  2. From the context menu of the selection, choose Refactor | Extract Component.

    Alternatively, press Ctrl+Alt+Shift+T and select Extract Component from the Refactor This popup.

    Extract a component: Refactor This

  3. In the dialog that opens, specify the name of the new component.

Angular signals

With JetBrains Rider, you can easily create Angular signals straight from signal, computed, and effect templates.

Angular signals

Create signals

  1. Write the function you need. JetBrains Rider runs an inspection and highlights the new function as unresolved.

  2. Hover over the highlighted function and click the Create signal '<function name>' link in the popup.

    Create Angular signal: inspection popup

    Alternatively, place the cursor at the highlighted function, press Alt+Enter, and select Create signal '<function name>'.

    Create Angular signal: intention action

  3. JetBrains Rider brings you to the component TypeScript file where a stub of the new signal is generated. Fill in the placeholders as necessary.

Configure highlighting for Angular signals

  1. Press Ctrl+Alt+S to open the IDE settings and select Editor | Color Scheme | Angular Template.

  2. Select Signal in the list and click the color indication next to Foreground.

    Angular signal: configure highlighting

  3. Select the color you prefer and click Apply.

Navigate through an Angular application

When working on Angular projects you have to jump between different component files, such as TypeScript, template, and style files. To navigate around your code, you can use the following options:

Also, you can download the Angular CLI QuickSwitch plugin and install it on your computer.

  1. To call the Related Symbol popup with a list of related files, perform one of the following actions:

    • Press Ctrl+Alt+Home.

    • Select Navigate | Related Symbol from the main menu.

    • Right-click any area in the editor and select Go To | Related Symbol.

    In a TypeScript component file, the popup also lists all the symbols that were imported into this file.

    Navigating through an Angular app using the Related Symbol popup

  2. To open a file, select it and press Enter. Alternatively, use the numbers associated with each file type:

    1. The TypeScript file with the component class

    2. Template

    3. Tests

    4. Styles

Add new features with ng add

In projects that use Angular CLI 6 or later, you can use the Angular Dependency action to add new libraries. This action runs the ng add command which installs the dependency and updates the app with a special installation script. Note that not all libraries support installation with ng add.

  1. Select File | New from the main menu or press Alt+Insert in the Project tool window, and then select Angular Dependency.

  2. From the list, select the library to add. The list shows the libraries that can be definitely installed with ng add. To install a package that is not on the list, scroll to its end and double-click the Install package not listed above link, then specify the package name in the dialog that opens.

  3. Follow the steps of the wizard.

    The example below illustrates adding Angular Material to a project.

    Adding Angular Material to a project with ng add

If you manage dependencies manually through your package.json, JetBrains Rider still recognizes packages that support ng add. When you add such package to package.json, JetBrains Rider suggests installing it with ng add.

JetBrains Rider suggests adding a dependency with ng add

View parameter hints

In Angular HTML templates, Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are shown only for values that are literals or function expressions but not for named objects.

Configure parameter hints

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints.

  2. Expand Angular HTML template under Parameter names.

  3. Specify the context in which you want parameter hints shown by selecting the corresponding checkboxes.

    The preview shows how the changes you make in the settings affect the code appearance.

  4. For some methods and functions, JetBrains Rider does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

  5. To hide parameter hints for any value type in any context, clear the Angular HTML template checkbox under Parameter names.

Confgure parameter hints in Angular templates

Inspect your code

JetBrains Rider brings a number of Angular-specific inspections that help you find errors as you edit your code and suggest quick-fixes for them.

In the example below, both a template and a templateUrl properties are used. JetBrains Rider detects the error, warns you about it, and suggests a quick-fix.

Angular inspection: duplicate properties

Another example shows how JetBrains Rider warns you about incorrect use of the *ngIf and *ngFor structural directives.

Angular inspection: incorrect use of structural directive

Angular-specific inspections help you identify improper usage of standalone components. In the example below, JetBrains Rider detects an import statement for a component that is not standalone and suggests a wiock-fix for the problem.

A non-standalone is imported directly

You may find it handy to use quick-fixes for creating @Input and @Output properties from Angular component templates, both with or without a transform property. Note that the required import statements are also generated automatically.

Quick-fix to generate @Input and @Output properties

JetBrains Rider also provides context-aware Create Field and Create Method intention actions that help you generate properly declared fields.

View the list of Angular-specific inspections and configure them

  1. In the Settings/Preferences dialog (Ctrl+Alt+S) , go to Editor | Inspections.

  2. Expand the Angular node.

  3. Configure inspection profiles and severity, disable and suppress predefined inspections, and create custom ones

    .

Use Angular Material Design components

JetBrains Rider recognizes Angular Material components and attributes and provides coding assistance for them:

  • Completion for components

    A list of suggested completion variants for an Angular component

  • Completion for attributes

    A list of suggested completion variants for an Angular attribute

  • Navigation between a component or an attribute and its declaration (press Ctrl+B or select Go To | Declaration from the context menu).

Install Angular Material

  • Open the embedded Terminal (Alt+F12) and type ng add @angular/material.

  • Add "@angular/material": "^16.2.11" under dependencies in your package.json and run npm install.

  • In the main menu, go to File | New | Angular Dependency, then select @angular/material from the list and follow the steps of the wizard that starts.

    AInstall Angualar Material

Learn more from Getting Started on the Angular Material official website.

Configure syntax highlighting

You can configure Angular-aware syntax highlighting according to your preferences and habits.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S) , go to Editor | Color Scheme | Angular Template.

  2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors schemes: fonts and colors of IDE text.

Run and debug an Angular application

For applications created with Angular CLI , you need to create two run/debug configurations with necessary settings, such as host and port:

  • An npm configuration . This configuration runs the ng serve command that launches the development server and starts your application in the development mode.

  • A JavaScript Debug configuration . This configuration launches a debugging session.

Run an Angular application

  1. Select the Angular CLI Server run configuration from the list on the toolbar and click Run.

    Run an Angular app in the development mode via a run/debug configuration

    Alternatively, run npm start in the Terminal Alt+F12, or double-click the start task in the npm tool window (View | Tool Windows | npm), or click the Run icon in the gutter next to the start script in package.json.

    Run an Angular app in the development mode from package.json

  2. Wait till the application is compiled and the development server is ready.

    The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:4200/. Click this link to view the application.

    Running Angular CLI app: the Development server is ready

Debug an Angular application

You can start a debugging session in different ways depending on how your application was created and where it is running.

  • If your application was created with Angular CLI, start a debugging session through an autogenerated Debug Application configuration. See Debug applications created with Angular CLI below.

  • If your application is running on localhost:4200, you can also start the debugger from the built-in Terminal or from the Run tool window. See Debug applications running on localhost below.

  • For debugging applications running on custom URLs, create a configuration of the type JavaScript Debug and specify the URL address at which your application is actually running. See Debug applications running on custom URLs below. This general workflow also works for applications running on localhost:4200 and for applications created with Angular CLI.

Debug applications created with Angular CLI

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

  3. Select the autogenerated Angular Application configuration from the list and click the Debug button next to it.

    Start a debugging session via a run configuration

    Alternatively, go to the Run tool window or the Terminal, hold Ctrl+Shift, and click this URL link.

Debug applications running on localhost

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

  3. The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:4200/. Hold Ctrl+Shift and click this URL link. JetBrains Rider starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug.

    Starting a debugging session from the Run tool window

    Alternatively, select the autogenerated Angular Application configuration from the list and click the Debug button the Debug button next to the list.

Debug applications running on custom URLs

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.

  3. The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL address, you will later specify it in a debug configuration. To view your application, just click the link.

  4. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations in the main menu, click the Add icon, and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.

  5. To launch your newly created configuration, select it from the list of configurations and click the Debug button next to the list.

When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

Troubleshooting for Node.js 17+

If you are using Node.js version 17 or later, during a debugging session you may face network connectivity issues that result in problems with attaching the debugger or with loading sourcemaps.

The workaround is to pass --host 127.0.0.1 to the server by updating the start script in your package.json as follows:

"start": "ng serve --host=127.0.0.1"
Last modified: 21 March 2024
Languages and frameworks: JavaScriptAngularJS