JetBrains Rider 2018.2 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. Install Node.js.

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

Adding new features to an Angular application using ng add

In projects that use Angular CLI 6 or higher, 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 on 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 np 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.

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

Using Angular language service

JetBrains Rider integrates 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 embedded Terminal (View | Tool Windows | Terminal or Ctrl+Alt+1).

  2. Change the current folder to the project root and type npm install @angular/language-service --save-dev at the command prompt.

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. In the Settings/Preferences dialog (Ctrl+Alt+S), click Typescript under Languages and Frameworks. The TypeScript page opens.

  2. 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:

  • 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 (F12 or Go To | Declaration on the context menu).

To install Angular Material

Last modified: 4 October 2018

See Also