PhpStorm 2017.1 Help

Angular

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

On this page:

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 NodeJS plugin is bundled with PhpStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins. The AngularJS plugin is not bundled with PhpStorm, 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 PhpStorm project in the following ways:

Installing Angular CLI

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

Generating an Angular application stub using Angular CLI

  1. Choose File | New Project on the main menu or click the Create New Project button on the Welcome screen. The New Project Dialog dialog box opens.
  2. In the left-hand pane, choose Angular CLI.
  3. In the right-hand pane:
    1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
    2. 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
    3. In the Angular CLI field, specify the path to the angular-cli package.
  4. When you click Create, PhpStorm generates the Angular-specific project structure with all the required configuration files based on the AngularJS seed project

Creating an empty PhpStorm project

  1. Choose File | New Project on the main menu or click the Create New Project button on the Welcome screen. The New Project Dialog dialog box opens.
  2. In the left-hand pane, choose Empty Project.
  3. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  4. When you click Create, PhpStorm 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 (View | Tool Windows | Terminal or by hovering your mouse pointer over /help/img/idea/2017.1/show_tool_window_bars.png in the lower left corner of PhpStorm 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

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

See Also

Last modified: 31 March 2017