PhpStorm
 
2022.2
Shortcuts: Windows
Get PhpStorm
You are viewing the documentation for an earlier version of PhpStorm.
  1. Web Technologies
  2. JavaScript
  3. Angular

Angular

Last modified: 06 September 2022

Required plugins: JavaScript and Typescript, Angular and AngularJS

The plugins are bundled with PhpStorm and enabled by default.

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

Create a new Angular application

The recommended way to start building a new Angular application is Angular CLI, which PhpStorm downloads and runs for you using npx. As a result, your application is bootstrapped with a ready to use TypeScript and Webpack configuration.

Of course, you can download Angular CLI yourself or create an empty PhpStorm project and install Angular in it.

Create an empty PhpStorm project

  1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The 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.

Install Angular in an empty project

  1. Open the empty project where you will use Angular.

  2. In the embedded Terminal (Alt+F12) , type:

    npm install @angular/core

    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.

Start with an existing Angular application

note

The recommended way to start a new Angular application is Angular CLI. Only in this case your application is bootstrapped with a ready to use TypeScript and Webpack configuration.

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

Open the application sources that are already on your machine

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

Check out the application sources from your version control

  1. Click Get from VCS on the Welcome screen.

    Alternatively, select File | New | Project from Version Control or Git | Clone… from the main menu.

    Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce.

  2. In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. See Check out a project (clone) for details.

Download the dependencies

  • Click Run 'npm install' or Run 'yarn install' in the popup:

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

    You can use npm, Yarn 1, or Yarn 2, see npm and Yarn for details.

  • Select Run 'npm install' or Run 'yarn install' from the context menu of package.json in the editor or in the Project tool window.

Project security

When you open a project that was created outside PhpStorm and was imported into it, PhpStorm displays a dialog where you can decide how to handle this project with unfamiliar source code.

Untrusted project warning

Select one of the following options:

  • Preview in Safe Mode: in this case PhpStorm, opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project.

    PhpStorm displays a notification on top of the editor area, and you can click the Trust project… link and load your project at any time.

  • Trust Project: in this case, PhpStorm opens and loads a project. That means project is initialized, project's plugins are resolved, dependencies are added, and all PhpStorm features are available.

  • Don't Open: in this case PhpStorm doesn't open the project.

Learn more from Project security.

tip

Projects created from the Welcome screen or via File | New | Project as described in Creating projects are automatically considered trusted.

Write and edit your code

This chapter provides Angular-specific hints. For general guidelines, see Write and edit source code and TypeScript.

Create Angular components

With PhpStorm, you can create Angular components in several ways:

Create a component using a predefined template

PhpStorm provides predefined live templates for creating Angular components, such as a-component, a-component-inline, and a-component-root. For details about live templates, see Live templates.

To view a full list of predefined templates, open the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Live Templates, and expand the Angular node.

  1. In the editor, press Ctrl+J, select the appropriate template (for example, a-component) from the list, and then press Enter.

  2. PhpStorm generates a component stub, places the caret at a field with canvas, and waits for you to specify the component name there. As you type the component name, the name of the selector and the template URL are filled in automatically in accordance with the Angular Style Guide.

https://resources.jetbrains.com/help/img/idea/2022.2/ws_create_angular_component_predefined_template.png
Gif

Learn how to customize a template with variables from Using and Creating Code Snippets in WebStorm Blog.

Create a component folder

In PhpStorm, you can create a bunch of files for an Angular component in one action and even place them all in a separate folder. To do that, you need to use a file template with several child templates. When you create a file from the parent template, the related files from the child templates are generated automatically. See Templates with multiple files for details.

Suppose you want to create an example folder with a bunch of component files, for example, example.component.ts for logic, example.component.html for the template, and example.component.css for styles. You can create a file template with two parent templates so all the three files will be generated at once an placed in a separate folder.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), select Editor | File and Code Templates.

  2. First create a template for a TypeScript component file:

    1. In the Files tab, click the Add button (the Create Template button) on the toolbar. A new, Unnamed, template is added to the list.

    2. In the right-hand pane, specify the template name, let it be Angular Component, and component.ts as the file extension.

    3. In the File name field, type $NAME/$NAME.

    4. Optionally, add a code template, for example:

      **
 * Created by ${USER} on ${DATE}
*/

import { Component } from '@angular/core';
    Create parent template

    Click Apply.

  3. Create a child template for the related HTML file:

    1. Select the parent template Angular Component and click the Create Child Template File button the Create Child Template File on the toolbar. A child template is added below the Angular Component template.

    2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the component.html extension.

    Create child template: component.html

    Click Apply.

  4. Create a child template for the related Style Sheet.

    1. Select the parent template Angular Component and click the Create Child Template File on the toolbar. A child template is added below the Angular Component template.

    2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the component.css extension.

  5. Click OK to save the templates.

  6. Create the component files.

    From the context menu of the folder where you want to store the component files, select New | Angular Component. In the dialog that opens, specify the name28 that will be used for the folder and for the component files in it (example in this example).

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_angular_component_create_folder.png
    Gif

Extract a component from a template

The Extract Angular component refactoring works by running ng generate component, taking schematic preferences inside your angular.json file into account.

  1. In an HTML template file, select the code fragment that you want to extract into an Angular component.

  2. From the context menu of the selection, choose Refactor | Extract Component.

    Alternatively, press Ctrl+Alt+Shift+T and select Extract Component from the Refactor This popup.

  3. In the dialog that opens, specify the name of the new component.

Navigate through an Angular application

When working on Angular projects you have to jump between different component files, such as TypeScript, template, and style files. To navigate around your code, you can use the following options:

Also, you can download the Angular CLI QuickSwitch plugin and install it on your computer.

Add new features with ng add

In projects that use Angular CLI 6 or later, 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.

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

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

View parameter hints

In Angular HTML templates, Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are shown only for values that are literals or function expressions but not for named objects.

Configure parameter hints

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints | Angular HTML template.

  2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.

    The preview shows how the changes you make in the settings affect the code appearance.

  3. For some methods and functions, PhpStorm does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

tip

To hide parameter hints for all types of values, clear the Show parameter name hints checkbox. Learn more from Parameter info.

Inspect your code

PhpStorm brings a number of Angular-specific inspections that help you find errors as you edit your code and suggest quick-fixes for them.

In the example below, both a template and a templateUrl properties are used. PhpStorm detects the error, warns you about it, and suggests a quick-fix.

Angular inspection: duplicate properties

Another example shows how PhpStorm warns you about incorrect use of the *ngIf and *ngFor structural directives.

Angular inspection: incorrect use of structural directive

View the list of Angular-specific inspections and configure them

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Inspections.

  2. Expand the Angular node.

  3. Configure inspection profiles and severity, disable and suppress predefined inspections, and create custom ones as described in Code inspections.

Use 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 (press Ctrl+B or select Go To | Declaration from the context menu).

Install Angular Material

Configure syntax highlighting

You can configure Angular-aware syntax highlighting according to your preferences and habits.

Run and debug an Angular application

For applications created with Angular CLI as described above, PhpStorm generates two run/debug configurations with default settings:

  • An npm configuration with the default name Angular CLI Server. This configuration runs the ng serve command that launches the development server and starts your application in the development mode.

  • A JavaScript Debug configuration with the default name Angular Application. This configuration launches a debugging session.

If your application was created without using Angular CLI, you need to create an npm and a JavaScript Debug run/debug configurations with the actual settings, such as, host, port, etc., manually.

Run an Angular application

tip

When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

Debug an Angular application

note

  • Debugging of Angular applications is only supported in Google Chrome and in other Chromium-based browsers.

  • Debugging of Angular applications is only supported with Node.js version 16 and earlier.

You can start a debugging session in different ways depending on how your application was created and where it is running.

Debug applications created with Angular CLI

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

  3. Select the autogenerated Angular Application configuration from the list and click the Debug button the Debug button next to the list.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_angular_debug_start_with_rc_light.png
    Gif

Debug applications running on localhost

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

  3. The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:4200/. Hold Ctrl+Shift and click this URL link. PhpStorm starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_angular_start_debug_from_run_tw_light.png
    Gif

Debug applications running on custom URLs

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.

  3. The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL address, you will later specify it in a debug configuration. To view your application, just click the link.

  4. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations on the main menu, click the Add icon, and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.

  5. To launch your newly created configuration, select it from the list of configurations and click the Debug button next to the list.

When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, pause and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

See also

Procedures

External Links

Web Resources