Using Angular

This feature is supported in the Ultimate edition only.

IntelliJ IDEA provides integration with the Angular framework also known as Angular 2.

On this page:

• Before you start
• Introduction
• Installing Angular CLI
• Generating an Angular application stub using Angular CLI
• Creating empty IntelliJ IDEA project
• Installing Angular in empty project through NPM
• Generating Angular structures
• Using Angular language service

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 IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Introduction

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

• Open an existing project with Angular sources. If you already have Angular sources in your project (for example, in the node_modules folder), just open your project and start working.
• Install Angular CLI and generate an Angular-specific project stub using Angular CLI. IntelliJ IDEA generates the Angular-specific project structure with all the required configuration files based on the AngularJS seed project
• Create an empty project , and then install Angular in it using the npm package manager.

Installing Angular CLI

To generate an Angular project in IntelliJ IDEA, you need to install the angular-cli package globally so it can be used in any IntelliJ IDEA project. Launch the embedded Terminal (View | Tool Windows | Terminal or by hovering your mouse pointer over in the lower left corner of IntelliJ IDEA and choosing Terminal from the menu and type npm install -g @angular/cli at the command line prompt.
You can also install the package on the Node.js and NPM as described in Installing and Removing External Software Using Node Package Manager.

Generating an Angular application stub using Angular CLI

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 NodeJS 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 package_name package.
5. When you click Finish , IntelliJ IDEA generates the Angular-specific project structure with all the required configuration files based on the AngularJS seed project

Creating 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.

Installing Angular in empty project through NPM

1. Open the empty project where you will use Angular.
2. Launch the embedded Terminal (View | Tool Windows | Terminal or by hovering your mouse pointer over in the lower left corner of IntelliJ IDEA 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

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 line 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 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.