JetBrains Rider 2020.1 Help

Using 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 Angular and AngularJS bundled plugin is enabled on the Plugins page, see Managing plugins for details.

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

Running and debugging an Angular application

For applications created with Angular CLI , JetBrains Rider generates two run/debug configurations with default settings:

  • An npm configuration with the default name Angular CLI Server. This configuration runs the ng serve command that launches the development server and starts your application in the development mode.

  • A JavaScript Debug configuration with the default name Angular Application. This configuration launches a debugging session.

Run an Angular application

  • Select the Angular CLI Server run configuration from the list on the toolbar and click Run next to the list.

    Alternatively, run npm start in the Terminal Ctrl+Alt+1 or double-click the start task in the npm tool window (View | Tool Windows | npm).

  • Wait till the application is compiled and the Webpack development server is ready. Open your browser at http://localhost:4200/ to view the application.

    Running Angular CLI app: the Webpack Debelopment server is ready

When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

Debug an Angular application

  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. To view the application, open your browser at the URL that is shown in the Run tool window, by default it is http://localhost:4200/.

    Run tool window shows the actual application URL

    If you are using another port or your application was not created with Angular CLI, copy the URL address at which your application is actually running, you will later specify this URL in a debug configuration.

  4. If you created your application with Angular CLI and it is running on the default port 4200, JetBrains Rider generates a JavaScript debug configuration with the default name Angular Application.

    Otherwise, create a new JavaScript debug configuration: go to Run | Edit Configurations, 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. From the list of configurations, select the autogenerated Angular Application configuration or your newly created custom one and start a debugging session by clicking Debug next to the list.

  6. When the first breakpoint is hit, switch to the Debug 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.

    Debugging Angular: examine the suspended application in the Debug tool window

Navigating through an Angular application

When working on Angular projects you have to jump between different component files, such as TypeScript, template, and style files. With JetBrains Rider, you can do that using the Navigation bar, or the Project view, or the Go to File action Ctrl+Shift+T.

You can also download the Angular CLI QuickSwitch plugin and install it on your computer.

Yet another way is the Related Symbol popup.

  1. In an Angular component file, press F7 or select Navigate | Related Symbol from the main menu or Go To | Related Symbol from the context menu. JetBrains Rider shows a Related Symbol popup with a list of related files. 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

Adding new features to an Angular application using 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 Ctrl+N 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.

    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

If such dependency is already installed, you may still want to reinstall it with ng add. In the package.json file, select the name of the package, press Alt+Enter, and click Reinstall with ng add.

Reinstalling a package with ng add

Inspecting Angular application 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

View the list of Angular-specific inspections and configure them

  1. In the Options 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 .

Using 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 F12 or select Go To | Declaration from the context menu).

Install Angular Material

Configuring syntax highlighting

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

  1. In the Options dialog Ctrl+Alt+S, go to Editor | Color Scheme | Angular Template.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.

Last modified: 27 July 2020
JavaScript-Specific GuidelinesUsing AngularJS