PhpStorm 2016.3 Help

Using Angular CLI

PhpStorm provides integration with Angular CLI.

On this page:

Before you start

Make sure the NodeJS and AngularJS plugins are 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.

Installing Angular CLI in PhpStorm

To use Angular CLI in PhpStorm projects, you need to install the angular-cli package globally. Do one of the following:

  • Run the installation from the command line in the global mode:
    1. Launch the embedded Terminal by hovering your mouse pointer over /help/img/idea/2016.3/show_tool_window_bars.png in the lower left corner of PhpStorm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
    2. Switch to the directory where NPM is stored or define a PATH variable for it so it is available from any folder, see Installing NodeJs.
    3. Type the following command at the command line prompt:
      npm install -g angular-cli

      The -g key makes the framework run in the global mode. Because the installation is performed through NPM, the Angular CLI framework is installed in the npm folder. Make sure this parent folder is added to the PATH variable. This enables you to launch the framework from any folder.

      For more details on the NPM operation modes, see npm documentation. For more information about installing the Angular CLI framework, see https://npmjs.org/package/angular-cli.

  • Run NPM from PhpStorm using the Node.js and NPM page of the Settings dialog box.
    1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X, and click Node.js and NPM under Languages&Frameworks.
    2. On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click /help/img/idea/2016.3/new.png.
    3. In the Available Packages dialog box that opens, select the required package to install.
    4. Select the Options check box and type -g in the text box next to it.
    5. Optionally specify the product version and click Install Package to start installation.

Generating an Angular CLI application stub

  1. Choose File | New Project on the main menu or click the 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 Angular 2-specific project structure with all the required configuration files.

Generating Angular2 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.

See Also

Last modified: 23 March 2017