GoLand
 
2025.1EAP
Shortcuts: Windows
Get GoLand
Because GoLand 2025.1 is still in development, this documentation may not be entirely accurate and is subject to change.
  1. Web development
  2. JavaScript
  3. Angular

Angular

Last modified: 22 November 2024

Required plugins:

JavaScript and TypeScript  -  The plugin is bundled with GoLand and enabled by default.

Angular and AngularJS  -  Install the plugin on the Settings | Plugins page, tab Marketplace.

Angular is a popular framework for building cross-platform applications. GoLand 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. Make sure the JavaScript and TypeScript plugin is enabled in the settings. Press CtrlAlt0S to open settings and then select Plugins. Click the Installed tab. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to Managing plugins.

  3. Install and enable the Angular and AngularJS plugin on the Settings | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains Marketplace.

Create a new Angular application

The recommended way to start building a new Angular application is Angular CLI, which GoLand 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 GoLand project and install Angular in it.

Create a new Angular app

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

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

  3. Specify the project name and the folder to create it in. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

    From the Angular CLI list, select npx --package @angular/cli ng.

    Alternatively, for npm version 5.1 and earlier, install the @angular/cli package yourself by running npm install -g @angular/cli in the Terminal AltF12. When creating an application, select the folder where the @angular/cli package is stored.

  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 CtrlSpace, GoLand shows you the available options and their description.

    • If you are using Angular version 16 or later, you can also select the Create new project with standalone components checkbox. Learn more from the Angular official website.

  5. When you click Create, GoLand generates an Angular-specific project with all the required configuration files and downloads all the necessary dependencies.

    Create a new Angular application

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 GoLand 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 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 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:

    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.

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

Project security

When you open a project that was created outside GoLand and was imported into it, GoLand 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, GoLand 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.

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

  • Don't Open: in this case, GoLand 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.

Create Angular components

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

Create a component using a predefined template

GoLand provides predefined live templates for creating Angular components, such as a-component, a-component-inline, and a-component-root.

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

For more information about live templates, refer to Live templates.

To view a full list of predefined templates, open the Settings dialog (CtrlAlt0S) , go to Editor | Live Templates, and expand the Angular node.

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

  2. GoLand 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.

  3. If necessary, make the new component standalone using the inspection pop-up.

    Make component standalone

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

Create a component folder

In GoLand, 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. For more information, refer to Templates with multiple files.

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 and placed in a separate folder.

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

      Add new template

      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.

      Add child template icon

      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.

    Create child template: component.html

  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 name 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/2025.1/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 CtrlAltShift0T and select Extract Component from the Refactor This popup.

    Extract a component: Refactor This

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

Angular signals

With GoLand, you can easily create Angular signals straight from signal, computed, and effect templates.

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

Create signals

  1. Write the function you need. GoLand runs an inspection and highlights the new function as unresolved.

  2. Hover over the highlighted function and click the Create signal '<function name>' link in the popup.

    Create Angular signal: inspection popup

    Alternatively, place the cursor at the highlighted function, press AltEnter, and select Create signal '<function name>'.

    Create Angular signal: intention action

  3. GoLand brings you to the component TypeScript file where a stub of the new signal is generated. Fill in the placeholders as necessary.

note

When you create a signal manually, GoLand suggests completion variants as you type.

Create Angular signal: code completion

Configure highlighting for Angular signals

  1. Press CtrlAlt0S to open settings and select Editor | Color Scheme | Angular Template.

  2. Select Signal in the list and click the color indication next to Foreground.

    Angular signal: configure highlighting

  3. Select the color you prefer and click Apply.

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.

  1. Select File | New from the main menu or press AltInsert in the Project tool window Alt01, 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 ng 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.

    tip

    The list of packages that can be installed with ng add is available on GitHub.

  3. Follow the steps of the wizard.

    The example below illustrates adding Angular Material to a project.

    Adding Angular Material to a project with ng add

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

GoLand suggests adding a dependency with ng add

Generate code with Angular Schematics

GoLand can generate code using both schematics defined in libraries like @angular/material and those defined in Angular CLI itself.

  1. Select File | New from the main menu or press AltInsert in the Project tool window, and then select Angular Schematic.

  2. From the list, select the relevant schematic. Start typing the name of the schematics, the list shrinks as you type.

    Choosing Angular Schematic

  3. In the dialog that opens, specify the name of the schematic to be generated and additional options, if necessary. GoLand 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

Configure the TypeScript Language Service

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.

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, GoLand 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.

Configure parameter hints in Angular templates

Inspect your code

GoLand 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. GoLand detects the error, warns you about it, and suggests a quick-fix.

Angular inspection: duplicate properties

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

Angular inspection: incorrect use of structural directive

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

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

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

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

View the list of Angular-specific inspections and configure them

  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.

Use Angular Material Design components

GoLand 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

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

Run an Angular application

Run an Angular application via a run/debug configuration

For applications created with Angular CLI in the GoLand New Project wizard as described above, GoLand generates 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.

In other cases, you need to create a run/debug configuration with the actual settings, such as, host, port, etc., manually.

Create an npm run/debug configuration

  1. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the Run widget on the toolbar.

    Open the Edit Configurations dialog

    In the Edit Configurations dialog that opens, click the Add button (the Add button) on the toolbar and select npm from the list.

  2. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js interpreter, and the package manager to use.

    In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default start script but you can configure another one in your package.json, for example, to run the application on a custom port.

    npm run/debug configuration

  3. Optionally:

    To open the application in the browser, update the configuration as follows: in the Browser / Live Edit tab, select the After launch checkbox, select the browser to open the application in, and specify the URL address at which the application wil run.

    If you are going to debug the application, select Google Chrome or another Chromium-based browser.

    Browser / Live Edit tab: select browser

Run an application

  1. From the list in the Run widget on the toolbar, select a run configuration of the type npm. This can be the autogenerated Angular CLI Server configuration or a custom one that you created yourself as described above.

  2. Click Run.

    Run a Vue.js app in the development mode via a run/debug configuration

  3. Wait till the application is compiled and the development server is ready.

    The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with @angular/cli, the default URL is http://localhost:4200/. Click this link to view the application.

    Running Angular CLI app: the Webpack Development server is ready

    Alternatively, enable GoLand to open the application on start as described above.

note

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.

You can start a debugging session either by launching a run/debug configuration or from the Run tool window that shows the URL at which your application is running in the development mode.

Start debugging via a run/debug configuration

To debug your Angular application you need two run/debug configurations:

  • An npm configuration to start your application in the development mode, as described above.

  • A JavaScript Debug configuration to attach the debugger to the application that is running in the development mode.

    note

    If you generated your application with Angular CLI, as described above, GoLand has already generated these two run/debug configurations.

You can create a JavaScript Debug configuration within the npm configuration to launch them at once, as described in Run and debug an Angular application with an npm run/debug configuration.

Alternatively, launch an npm and a JavaScript Debug run/debug configurations separately, as described in Start debugging with a JavaScript Debug run/debug configuration.

Run and debug an Angular application with a single npm run/debug configuration

  1. Set the breakpoints in your code.

  2. Create an npm configuration as described above.

    note

    If you generated your application with Angular CLI, GoLand has already created an npm configuration with the default name Angular CLI Server. The configuration is available from the Run widget and in the Run/Debug Configurations dialog.

  3. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js interpreter, and the package manager to use.

    In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default start script but you can configure another one in your package.json, for example, to run the application on a custom port.

    npm run/debug configuration

  4. In the Browser / Live Edit tab, select the After launch checkbox, select Google Chrome or another Chromium-based browser from the list, select the with JavaScript debugger checkbox, and then specify the URL at which your application will run.

    npm configuration, Browser tab

  5. Click Run.

    To re-run the configuration, select it from the list in the Run widget and click Run next to it.

    GoLand runs the application in the development mode and at the same time launches a debugging session.

    Debugging session

  6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop 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.

Start debugging with a JavaScript Debug run/debug configuration

  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.

    The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL to specify it later in the JavaScript Debug configuration.

    Angular app is running in the development mode

  3. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations in the main menu, click the Add icon, and select Javascript Debug from the list.

    If you generated your application with Angular CLI, as described above, GoLand has already created a JavaScript Debug run/debug configuration with the default name Debug Application and the default URL http://localhost:4200. Select this run/debug configuration from the list under the JavaScript Debug node.

    Select the generated JavaScript debug run/debug configuration

  4. In the Run/Debug Configurations: JavaScript Debug dialog that opens, specify the name of the configuration and the URL address at which the application is running in the development mode. You can copy this URL in the Run tool window or in the Terminal, as described above.

    Create a JavaScript Debug configuration: specify the URL

    note

    If you are using the autogenerated configuration, make sure the specified URL address is the one at which your application is actually running.

  5. Click Debug.

    To re-run the configuration, select it from the list in the Run widget and click Debug next to it.

    Run a JavaScript Debug configuration from the Run widget

  6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop 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.

Start debugging from the Run tool window or from the built-in Terminal

If your application is running in the development mode on localhost, in particular, if it was generated with Angular CLI, you can launch a debugging session right from the >Run tool window or from the built-in Terminal.

When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop 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.

Troubleshooting for Node.js 17+

If you are using Node.js version 17 or later, during a debugging session you may face network connectivity issues that result in problems with attaching the debugger or with loading sourcemaps.

The workaround is to pass --host 127.0.0.1 to the server by updating the start script in your package.json as follows:

"start": "ng serve --host=127.0.0.1"

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.

  1. In the project root, select New | File from the context menu and specify .ws-context as the file name.

  2. In .ws-context, use two types of properties:

    • <context-name> with the context value string

    • A GLOB pattern with a context details object

  3. Use the following context values:

    • framework: vue, angular, react, svelte, astro

    • angular-template-syntax: V_2, V_17

    • nextjs-project: nextjs

    • astro-project: astro

    • vue-store: vuex, pinia

    • vue-class-component-library: vue-class-component, vue -property-decorator, vue-facing-decorator

    • jsdoc-dialect: jsdoc-typescript, jsdoc-closure

  4. Use path nesting for simplicity.

    • The last segment of a GLOB path is the file name pattern, it only supports the * wildcard.

    • If the last segment is a ** it matches all nested directories and files.

    • Top level context properties should have the /** pattern.

  5. When several patterns match the same file name, the following rules are used for disambiguation:

    • Choose the pattern with maximum number of path segments, excluding ** segments.

    • Choose the pattern that is a pure file name pattern, which means that it does not end in ** or /.

    • Choose the pattern that was defined first.

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