IntelliJ IDEA
 
2025.1
Shortcuts: Windows
Get IntelliJ IDEA
  1. Web development
  2. JavaScript
  3. Angular
Ultimate

Angular

Last modified: 10 April 2025

Available only in IntelliJ IDEA Ultimate: download to try or compare editions

Required plugins:

JavaScript and TypeScript, Angular and AngularJS  -  The plugins are available only in IntelliJ IDEA Ultimate, where they are enabled by default.

Angular is a popular framework for building cross-platform applications. IntelliJ IDEA 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 IntelliJ IDEA 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 IntelliJ IDEA project and install Angular in it.

Create a new Angular app

Create an empty IntelliJ IDEA project

  1. Select File | New | Project from the main menu or click the New Project button on the Welcome screen.

  2. In the New Project dialog, select New Project in the left-hand pane.

  3. In the right-hand pane, select JavaScript in the Language area.

  4. Name the new project and change its location if necessary, then click Create.

  5. When you click Create, IntelliJ IDEA 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 (AltF12) , 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, refer to 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 IntelliJ IDEA and download the required dependencies.

Open the application sources that are already on your machine

  • Click Open or Import on the Welcome screen or select File | Open 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 Clone Repository on the Welcome screen.

    Alternatively, select File | New | Project from Version Control or Git | Clone or VCS | Get from Version Control 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. For more information, refer to Check out a project (clone).

Download the dependencies

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

    Open an application and download the dependencies

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

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

Project security

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

Select one of the following options:

  • Preview in Safe Mode: in this case, IntelliJ IDEA 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.

    IntelliJ IDEA 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, IntelliJ IDEA opens and loads a project. That means the project is initialized, project's plugins are resolved, dependencies are added, and all IntelliJ IDEA features are available.

  • Don't Open: in this case, IntelliJ IDEA 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 are automatically considered trusted.

Write and edit your code

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

Configure the Angular Language Service

IntelliJ IDEA provides full Angular-specific coding assistance including code completion, error detection and highlighting, hints, and navigation inside Angular templates. You can configure to get coding assistance for Angular projects from the Angular Language Service, from the TypeScript Language Service or only from the internal IntelliJ IDEA parser and code inspections.

By default, the Angular Language Service is enabled and is listed in the Language services wizard on the Status bar.

Restart the Angular Language Service

  • Click the Language Services running on current file icon on the Status bar and then click the Restart Service icon next to Angular TypeScript <version>.

    Angular Language Service widget - Restart Service

Configure type evaluation

  • Click the Service-Powered Type Engine icon on the Status bar and select the checkboxes next to the services from which you want to get type evaluation. Restart IntelliJ IDEA, when ready.

    Service-Powered Type Engine widget

  • Alternatively, press CtrlAlt0S to open settings and select Settings | Languages & Frameworks | TypeScript | Angular, select Auto, and then select Enable service-powered type engine checkbox.

    By default, the checkbox is cleared, so type evaluation, resolution, code inspections and refactorings are based on the type information from the IntelliJ IDEA internal TypeScript engine.

    This default behavior may result in performance issues and in bugs in type resolution because the type evaluation algorithm that the IntelliJ IDEA internal TypeScript engine uses differs from the algorithm of the Angular Language Service. Selecting the checkbox may help avoid these problems.

    note

    Some of the code highlighting and completion are always retrieved from the appropriate Language Service, if the TypeScript Language Service checkbox on the TypeScript page is selected and Angular Language Service is in the Auto state, no matter whether the Enable service-powered type engine checkbox is selected or cleared.

Standalone components

If your project uses Angular 19, Components, Pipes and Directives are by default standalone. For components that are declared via NgModules, set standalone: false.

IntelliJ IDEA detects incorrect imports of non-standalone pipes, directives or components and usages of the imports property within non-standalone components:

Incorrect usage imports directives in non-standalone components

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. In templates, information on block parameters is shown on completion.

Configure parameter hints

  1. Open the Settings dialog (CtrlAlt0S) and go to Editor | Inlay Hints.

  2. Expand Angular HTML template under Parameter names.

  3. Specify the context in which you want parameter hints shown by selecting the corresponding checkboxes.

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

  4. For some methods and functions, IntelliJ IDEA 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.

  5. To hide parameter hints for any value type in any context, clear the Angular HTML template checkbox under Parameter names.

Configure parameter hints in Angular templates

Inspect your code

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

Duplicate properties

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

Angular inspection: duplicate properties

Incorrect use of structural directives

IntelliJ IDEA warns you about incorrect use of the *ngIf and *ngFor structural directives.

Angular inspection: incorrect use of structural directive

Use of standalone components

Angular-specific inspections help you identify improper usage of standalone components. In the example below, IntelliJ IDEA detects an import statement for a component that is not standalone and suggests a quick-fix for the problem.

https://resources.jetbrains.com/help/img/idea/2025.1/angular_inspections_import_non_standalone.png
Gif

Unused imports

In standalone components, IntelliJ IDEA detects import statements for unused components, pipes, and directives and suggests removing them.

Angular inspection - unused import

Unused import statements can be also removed automatically on reformatting a file (CtrlAltShift0L).

note

The inspection is available only for standalone components but not for imported NgModules.

Quick-fixes and context-aware actions

You may find it handy to use quick-fixes for creating @Input and @Output properties from Angular component templates, both with or without a transform property. Note that the required import statements are also generated automatically.

https://resources.jetbrains.com/help/img/idea/2025.1/angular_inspection_input_output.png
Gif

IntelliJ IDEA also provides context-aware Create Field and Create Method actions that help you generate properly declared fields.

View and configure Angular-specific inspections

  1. In the Settings dialog (CtrlAlt0S) , 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.

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.

Navigate with the Related Symbol popup

  1. To call the Related Symbol popup with a list of related files, perform one of the following actions:

    • Press CtrlAltHome.

    • Select Navigate | Related Symbol from the main menu.

    • Right-click any area in the editor and select Go To | Related Symbol.

    In a TypeScript component file, the popup also lists all the symbols that were imported into this file.

    Navigating through an Angular app using the Related Symbol popup

  2. To open a file, select it and press Enter. Alternatively, use the numbers associated with each file type:

    1. The TypeScript file with the component class

    2. Template

    3. Tests

    4. Styles

Navigate with usages

  • Place the caret at the declaration of a symbol and press Ctrl0B.

    If the symbol is used only once, IntelliJ IDEA brings you to this usage and highlights it.

    If several usages are found, IntelliJ IDEA shows them in a popup. Select the usage to navigate to and press Enter or just click it in the list.

  • Place the caret at the declaration of a symbol and press CtrlAltF7.

    Use the icons on the toolbar to show or hide references to components in import statements (the Show import statements button), in string literals (the Show Dynamic Usages button), and in HTML files (the Show Component Usages icon.

  • Click the Show usages hint to jump to the usage or to select the relevant one from the list.

Use Angular Material Design components

IntelliJ IDEA 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 Ctrl0B or select Go To | Declaration from the context menu).

Install Angular Material

  • Open the embedded Terminal (AltF12) and type ng add @angular/material.

  • Add "@angular/material": "^16.2.11" under dependencies in your package.json and run npm install.

  • In the main menu, go to File | New | Angular Dependency, then select @angular/material from the list and follow the steps of the wizard that starts.

    AInstall Angualar Material

Learn more from Getting Started on the Angular Material official website.

Configure syntax highlighting

In an Angular project, IntelliJ IDEA recognizes and highlights various symbols, such as CSS classes and properties, HTML attributes and tags, as well as Angular input and output bindings. The occurrences of these symbols are highlighted in various contexts, such as HTML attributes or JavaScript string literals.

Highlighting symbols in various contexts

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

Use several frameworks within a project

Sometimes you may need to use other frameworks within one Angular project.

To get context-aware coding assistance in each file, create a configuration file .ws-context and specify which framework should be used in each particular file or folder. The settings from this file will override the default configuration.

Example

Suppose you have a project with a number of frameworks used in various folders.

A project with different frameworks

To get context-aware assistance for each file in the project, add the following code to .ws-context:

{
  "framework": "vue",
  "angular-template-syntax": "V_2",
  "src/**/app/**": {
    "framework": null,
    "app.component.html" : {
      "framework": "angular",
      "angular-template-syntax": "V_17"
    }
  },
  "src/**/p*-editor/*.html" : {
    "framework" : "angular"
  }
}

See also

Procedures

External Links

Web Resources