RubyMine 2017.2 Help

Angular

RubyMine provides integration with the Angular framework also known as Angular 2.

Before you start

  1. Download, install, and configure Node.js as described in Configuring Node.js Interpreters.
  2. Make sure the AngularJS plugin is installed and enabled. The plugin is not bundled with RubyMine, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Getting Angular support

You can get Angular support in a RubyMine project in the following ways:

Installing Angular CLI

To generate an Angular project in RubyMine, you need to install the angular-cli package globally so it can be used in any RubyMine project. Open the built-in RubyMine Terminal (press Alt+F12 or choose View | Tool Windows | Terminal on the main menu) and type npm install -g @angular/cli at the command line prompt.

Generating an Angular application stub using Angular CLI

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose Angular CLI.
  3. In the right-hand pane:
    1. specify the project name and the path to the folder where the project-related files will be stored.
    2. In the Node Interpreter field, specify the Node.js interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one, see Configuring Node.js Interpreters
    3. In the Angular CLI field, specify the path to the angular-cli package.
  4. When you click Create, RubyMine generates the Angular-specific project structure with all the required configuration files based on the AngularJS seed project

Creating an empty RubyMine project

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose Empty Project.
  3. specify the project name and the path to the folder where the project-related files will be stored.
  4. When you click Create, RubyMine creates and opens an empty project.

Installing Angular in an empty project through NPM

  1. Open the empty project where you will use Angular.
  2. Launch the embedded Terminal by choosing View | Tool Windows | Terminal or by hovering your mouse pointer over /help/img/idea/2017.2/show_tool_window_bars.png in the lower left corner of RubyMine and choosing Terminal from the menu and type npm install @angular/core at the command line prompt. That will install the core Angular package with the critical runtime parts of the framework. You may also need to install other packages that are parts of Angular, see the list of packages.

Generating Angular structures

In an Angular CLI project, you can have specific structures generated automatically.

  1. On the main menu, choose File | New | Angular CLI.
  2. In the pop-up list that opens, click the relevant type of structure.
  3. In the dialog box that opens, specify the name of the structure to be generated and the path to it relative to the src/app folder of your project. If you want to generate a structure in a separate folder, create this folder first. This does not apply to components, which are by default generated in separate folders unless the --flat option is specified.

    If necessary, specify additional options, for example, --flat to have a new component generated directly in the specified location without creating a separate folder.

Using Angular language service

RubyMine 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 Alt+F12).
  2. Change the current folder to the project root and at the command line prompt run npm install @angular/language-service –save-dev.

The Angular language service is activated by default so RubyMine 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 Compiler Tool Window. To activate or disable the service:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or RubyMine | Preferences for macOS, and click Typescript under Languages & Frameworks.
  2. On the TypeScript page that opens, select the Enable TypeScript Compiler check box and click Configure next to it.
  3. In the Service options dialog box that opens, select or clear the Use Angular service check box.

Using Angular Material Design components

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

To install Angular Material:
Open the built-in RubyMine Terminal (press Alt+F12 or choose View | Tool Windows | Terminal on the main menu) and type npm install --save @angular/material at the command line prompt. For details, see Getting Started on the Angular Material Official website.

Support of Angular Material in RubyMine 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 (Ctrl+B or Go To | Declaration on the context menu).

See Also

Last modified: 21 July 2017