PyCharm 2017.1 Help

Using Angular

PyCharm provides integration with the Angular framework also known as Angular 2.

On this page:

Before you start

  1. Download, install, and configure Node.js as described in Configuring Node.js Interpreters.
  2. Make sure the AngularJS plugin is installed and enabled. The AngularJS plugin is bundled with PyCharm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins. The NodeJS plugin is not bundled with PyCharm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Introduction

You can get Angular support in a PyCharm project in the following ways:

Installing Angular CLI

To generate an Angular project in PyCharm, you need to install the angular-cli package globally so it can be used in any PyCharm project. Launch the embedded Terminal (View | Tool Windows | Terminal or by hovering your mouse pointer over /help/img/idea/2017.1/show_tool_window_bars.png in the lower left corner of PyCharm and choosing Terminal from the menu and type npm install -g @angular/cli at the command line prompt.
You can also install the package on the Node.js and NPM as described in Installing and Removing External Software Using Node Package Manager.

Generating an Angular application stub using Angular CLI

  1. Choose File | New Project on the main menu or click the Create New Project button on the Welcome screen. The New Project Dialog dialog box opens.
  2. In the left-hand pane, choose Angular CLI.
  3. In the right-hand pane:
    1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
    2. In the Node Interpreter field, specify the NodeJS interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one, see Configuring Node.js Interpreters
    3. In the Angular CLI field, specify the path to the angular-cli package.
  4. When you click Create, PyCharm generates the Angular-specific project structure with all the required configuration files based on the AngularJS seed project

Creating pure Python PyCharm project

  1. Choose File | New Project on the main menu or click the Create New Project button on the Welcome screen. The New Project Dialog dialog box opens.
  2. In the left-hand pane, choose Pure Python.
  3. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  4. When you click Create, PyCharm creates and opens a Pure Python project.

Installing Angular in pure Python project through NPM

  1. Open the pure Python project where you will use Angular.
  2. Launch the embedded Terminal (View | Tool Windows | Terminal or by hovering your mouse pointer over /help/img/idea/2017.1/show_tool_window_bars.png in the lower left corner of PyCharm and choosing Terminal from the menu and type npm install @angular/core at the command line 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.

Generating Angular structures

In an Angular CLI project, you can have specific structures generated automatically.

  1. On the main menu, choose File | New | Angular CLI.
  2. In the pop-up list that opens, click the relevant type of structure.
  3. In the dialog box that opens, specify the name of the structure to be generated and the path to it relative to the src/app folder of your project. If you want to generate a structure in a separate folder, create this folder first. This does not apply to components, which are by default generated in separate folders unless the --flat option is specified.

    If necessary, specify additional options, for example, --flat to have a new component generated directly in the specified location without creating a separate folder.

Using Angular language service

PyCharm supports integration 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. Also make sure you have a tsconfig.json file in your project.

To install the @angular/language-service package:

  1. Open the Terminal tool window (View | Tool Windows | Terminal or Alt+F12).
  2. Change the current folder to the project root and at the command line prompt run npm install @angular/language-service –save-dev.

The Angular language service is activated by default so PyCharm 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 Compiler Tool Window. To activate or disable the service:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PyCharm | Preferences for macOS, and click Typescript under Languages & Frameworks.
  2. On the TypeScript page that opens, select the Enable TypeScript Compiler check box and click Configure next to it.
  3. In the Service options dialog box that opens, select or clear the Use Angular service check box.

See Also

Last modified: 26 July 2017