PhpStorm 2018.3 Help

Angular

Angular is a popular framework for building cross-platform applications. PhpStorm provides support for Angular and helps you on every step of the development process – from creating a new Angular app and working on the components to debugging and testing it.

Before you start

  1. Download and install Node.js.

  2. Install and enable the AngularJS repository plugin on the Plugins page as described in Managing Plugins.

Creating a new Angular application

You can use Angular CLI or create an empty PhpStorm project and install Angular in it.

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

To install Angular CLI globally

  • Open the built-in PhpStorm Terminal (Alt+F12) 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 Create New Project on the Welcome screen. The Create New Project Dialog opens.

  2. In the left-hand pane, choose Angular CLI.

  3. In the right-hand pane:
    1. Specify 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 list or choose Add to configure a new one

    3. In the Angular CLI field, specify the path to the @angular/cli package.

    4. Optionally, in the Additional parameters field, specify the extra ng new options to pass to Angular CLI. Code completion is available in this field: as you start typing the name of an option or press Ctrl+Space, PhpStorm shows you the available options and their description.

  4. When you click Create, PhpStorm generates an Angular-specific project with all the required configuration files.

To create an empty PhpStorm project

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.

  2. In the left-hand pane, choose Empty Project.

  3. Specify the path to the folder where the project-related files will be stored.

  4. When you click Create, PhpStorm 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 (Alt+F12) 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

To continue developing an existing Angular application, open it in PhpStorm and download the required dependencies.

To open the application sources that are already on your machine

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

To check out the application sources from your 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

  • Click Run 'npm install' in the pop-up window:

    Opening an Angular application and downloading the dependencies from package.json

Adding new features to an Angular application using ng add

In projects that use Angular CLI 6 or higher, you can use the Angular Dependency action to add new libraries. This action runs the ng add command which installs the dependency and updates the app with a special installation script. Note that not all libraries support installation with ng add.

  1. Select File | New on the main menu or press Alt+Insert in the Project tool window, and then select Angular Dependency.

  2. From the list, select the library to add. The list shows the libraries that can be definitely installed with np add. To install a package that is not on the list, scroll to its end and double-click the Install package not listed above link, then specify the package name in the dialog that opens.

    The example below illustrates adding Angular Material to a project.

If you manage dependencies manually through your package.json, PhpStorm still recognizes packages that support ng add. When you add such package to package.json, PhpStorm suggests installing it with ng add.

PhpStorm suggests adding a dependency with ng add

If such dependency is already installed, you may still want to reinstall it with ng add. In the package.json file, select the name of the package, press Alt+Enter, and click Reinstall with ng add.

Reinstalling a package with ng add

Generating code with Angular Schematics

In Angular CLI 6 projects, PhpStorm can generate code using both schematics defined in libraries like @angular/material and those defined in Angular CLI itself. For earlier versions, PhpStorm generates only components, services, and other blueprints defined in Angular CLI.

  1. Select File | New on the main menu or press Alt+Insert in the Project tool window, and then select Angular Schematic.

  2. From the list, select the relevant schematic.

    Choosing Angular Schematic

  3. In the dialog that opens, specify the name of the schematic to be generated and additional options, if necessary. PhpStorm shows the description of the schematic and provides code completion and description for available options.

    Generating Angular CLI schematic: code completion and description is provided

Using Angular language service

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

The Angular language service is installed by default in all Angular projects that are generated using Angular CLI, see Creating a new Angular application.

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 Tool Window.

To toggle the status of the service

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Typescript under Languages and Frameworks. The TypeScript page opens.

  2. Select the TypeScript Language Service checkbox and then select or clear the Angular Language Service checkbox.

Using Angular Material Design components

PhpStorm recognizes Angular Material components and attributes and provides coding assistance for them:

  • Completion for components

    A list of suggested completion variants for an Angular component

  • Completion for attributes

    A list of suggested completion variants for an Angular attribute

  • Navigation between a component or an attribute and its declaration (Ctrl+B or Go To | Declaration on the context menu).

To install Angular Material

Last modified: 18 March 2019

See Also