IntelliJ IDEA 2017.3 Help

Angular

This feature is supported in the Ultimate edition only.

IntelliJ IDEA 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.

Creating a new Angular application

You can use the angular-cli package or create an empty IntelliJ IDEA project and install Angular in it.

Generating an Angular application with Angular CLI

Angular CLI is the recommended way to start building a new Angular application. Angular CLI should be installed globally so it can be used in any IntelliJ IDEA project.

To install Angular CLI globally
Open the built-in IntelliJ IDEA Terminal (press Alt+F12 or choose View | Tool Windows | Terminal on the main menu) and type npm install -g @angular/cli at the command prompt.

To create an application

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose AngularCLI and click Next.
  4. On the second page of the wizard, specify the project name and the folder to create it in. 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 In the Angular CLI field, specify the path to the angular-cli package.
  5. When you click Finish, IntelliJ IDEA generates an Angular-specific project with all the required configuration files.

Installing Angular in an empty IntelliJ IDEA project

To create an empty IntelliJ IDEA project

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose Static Web and click Next.
  4. On the second page of the wizard, specify the project name and the folder to create it in.
  5. When you click Finish, IntelliJ IDEA creates and opens an empty project.

To install Angular in an empty project

  1. Open the empty project where you will use Angular.
  2. Open the embedded Terminal (View | Tool Windows | Terminal) and type npm install @angular/core at the command 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.

Starting with an existing Angular application

If you are going to continue developing an existing Angular application, open it in IntelliJ IDEA and download the required dependencies.

If the application sources are already on your machine
Click Open on the Welcome screen or choose File | Open on the main menu. In the dialog that opens, select the folder where your sources are stored.

If the application sources are under version control

  1. Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control on the main menu.
  2. Select your version control system from the list.
  3. In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.

To download the dependencies
Open the embedded Terminal (View | Tool Windows | Terminal) and type npm install at the command prompt.

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

IntelliJ IDEA 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 prompt run npm install @angular/language-service –save-dev.

The Angular language service is activated by default so IntelliJ IDEA 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 IntelliJ IDEA | Preferences for macOS, and click Typescript under Languages & Frameworks.
  2. On the TypeScript page that opens, select the Enable TypeScript Compiler checkbox and click Configure next to it.
  3. In the Service options dialog box that opens, select or clear the Use Angular service checkbox.

Using Angular Material Design components

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

To install Angular Material
Open the built-in IntelliJ IDEA Terminal (press Alt+F12 or choose View | Tool Windows | Terminal on the main menu) 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 IntelliJ IDEA 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).

Last modified: 11 October 2017

See Also