JetBrains Rider 2017.3 Help

Angular

JetBrains Rider integrates with Angular also known as Angular 2. This platform makes it easy to build web, mobile, or desktop applications.

Before you start

  1. Download, install, and configure Node.js as described in Configuring Node.js Interpreters.
  2. Install and enable the NodeJS and AngularJS plugins on the Plugins page as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

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 | File or Folder... from the main menu, and then specify the root folder of the application.

Using Angular language service

JetBrains Rider supports integration with the Angular language service developed by the Angular team to improve code analysis and completion for Angular-TypeScript projects. Note that the Angular language service works only with the projects that use Angular 2.3.1 or higher and TypeScript version compatible with it. Also make sure you have a tsconfig.json file in your project.

To install the @angular/language-service package

  1. Open the Terminal tool window (View | Tool Windows | Terminal or Ctrl+Alt+1).
  2. Change the current folder to the project root and at the command prompt run npm install @angular/language-service –save-dev.

The Angular language service is activated by default so JetBrains Rider starts it automatically together with the TypeScript service and shows all the errors and warnings in your TypeScript and HTML files both in the editor and in the TypeScript Tool Window.
To toggle the status of the service

  1. Open the Settings/Preferences by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or JetBrains Rider | Preferences for macOS, and click Typescript under Languages & Frameworks.
  2. On the TypeScript page that opens, select the TypeScript Language Service checkbox and then select or clear the Angular Language Service checkbox.

Using Angular Material Design components

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

To install Angular Material
Open the built-in JetBrains Rider Terminal (Ctrl+Alt+1) and type npm install --save @angular/material at the command prompt. For details, see Getting Started on the Angular Material Official website.

Support of Angular Material in JetBrains Rider includes

  • Completion for components
    ws_angular-material-component.png
  • Completion for attributes
    ws_material-attribute.png
  • Navigation between a component or an attribute and its declaration (F12 or Go To | Declaration on the context menu).

Last modified: 19 April 2018

See Also