RubyMine 2020.3 Help

Angular

Angular is a popular framework for building cross-platform applications. RubyMine 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 Angular and AngularJS plugin on the Settings/Preferences | Plugins page as described in Installing plugins from JetBrains repository.

Creating a new Angular application

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

  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 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. Select a configured interpreter from the list or choose Add to configure a new one.

    3. 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 Alt+F12. 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 Ctrl+Space, RubyMine shows you the available options and their description.

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

Create an empty RubyMine 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, RubyMine 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.

Starting with an existing Angular application

To continue developing an existing Angular application, open it in RubyMine 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 Get from VCS on the Welcome screen or select VCS | Get from Version Control from the main menu.

  2. In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.

Download the dependencies

Running and debugging an Angular application

For applications created with Angular CLI as described above, RubyMine 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.

Run an Angular application

  1. Select the Angular CLI Server run configuration from the list on the toolbar and click Run next to the list.

    Alternatively, run npm start in the Terminal Alt+F12 or double-click the start task in the npm tool window (View | Tool Windows | npm ).

  2. Wait till the application is compiled and the Webpack development server is ready.

    The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:4200/. Click this link to view the application.

    Running Angular CLI app: the Webpack Development server is ready

Debug an Angular application

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 next to the list.

    Start a debugging session via a run configuration

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. RubyMine starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug.

    Starting a debugging session from the Run tool window

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

Navigating through an Angular application

When working on Angular projects you have to jump between different component files, such as TypeScript, template, and style files. With RubyMine, you can do that using the Navigation bar, or the Project view, or the Go to File action Ctrl+Shift+N.

You can also download the Angular CLI QuickSwitch plugin and install it on your computer.

Yet another way is the Related Symbol popup.

  1. In an Angular component file, press Ctrl+Alt+Home or select Navigate | Related Symbol from the main menu or Go To | Related Symbol from the context menu. RubyMine shows a Related Symbol popup with a list of related files. 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

Adding new features to an Angular application using 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 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 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.

    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, RubyMine still recognizes packages that support ng add. When you add such package to package.json, RubyMine suggests installing it with ng add.

RubyMine 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, RubyMine can generate code using both schematics defined in libraries like @angular/material and those defined in Angular CLI itself. For earlier versions, RubyMine generates only components, services, and other blueprints defined in Angular CLI.

  1. Select File | New from 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. RubyMine 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

Inspecting Angular application code

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

Angular inspection: duplicate properties

Another example shows how RubyMine 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.

Using Angular Material Design components

RubyMine 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

Configuring syntax highlighting

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

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Color Scheme | Angular Template.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configure colors and fonts.

Last modified: 08 March 2021
Shell scripts AngularJS