Angular Workflow in WebStorm

Posted on by Ekaterina Prigara

WebStorm is well-known for its AngularJS support. WebStorm 2016.1 introduces lots of new exciting features in Angular (previously known as Angular 2) support. Combining that with support for the latest TypeScript and ECMAScript 6 (2015) features, WebStorm can be a great playground for your new Angular applications.

If you’re using Angular 2 RC, please make sure you’re using WebStorm 2016.1.3 or WebStorm 2016.2 for proper support.

In this blog post we’d like to share with you some tips and tricks that we hope you’ll find useful when working on Angular apps in TypeScript in WebStorm. We’ll have a look at:

Disclaimer: This blog post is not intended as a tutorial for getting started with Angular . If you’re new to Angular, we suggest you to go through the Angular Quickstart first. While Angular is still in Beta, there might be some changes in the framework that can affect the way Angular-specific coding assistance works in WebStorm.

Angular and TypeScript support are also available in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Professional, and RubyMine, all version 2016.1 or above. Make sure that you’ve installed AngularJS plugin: go to Preferences | Plugins – Install JetBrains plugins and search for AngularJS.

Let’s see what you can do with WebStorm!

Installing Angular

To make WebStorm understand Angular syntax, we need to have Angular library files in our project.

The easiest way to add Angular to the project is using npm. If you don’t have package.json file in the project yet, run in the terminal opened in the application’s root folder: npm init -y

Then run: npm install --save @angular/core

That will install the core Angular package with the critical runtime parts of the framework. Most probably you would also need to install other packages Angular consists of – here’s a full list.

Tip: If you have already added a package.json file in your project, you can just right-click it in the IDE Project view and use Run npm install action.

Using Angular CLI

WebStorm 2016.2 adds integration with Angular CLI for bootstrapping new Angular  projects. Install Angular CLI globally via npm:
npm install -g @angular/cli

Now you can create new projects with it from the IDE Welcome screen: click Create New Project, select Angular CLI from the list on the left, enter project name, click Ok, wait till all dependencies are installed and you’re ready to go.

Auto imports in TypeScript

One of the great advantages of using typed languages like TypeScript is that you get far more precise and intelligent coding assistance, which helps you write better code more efficiently.

To define a component in our Angular application, we use @Component decorator. It needs to be imported from the Angular 2 library.

WebStorm can import symbols from other files and modules automatically. So you can just start typing @Component or, for example, a class defined in the project and WebStorm will just take care of the import statement. By the way, imported symbols from the same module are nicely put in one import statement.

auto-import-ts

You can disable auto imports in Preferences | Editor | General | Auto Import. You can still add the import by hitting Alt-Enter on the unresolved symbol and selecting Add import statement.

If you want to import everything you need first, start typing the import statement and WebStorm will suggest the files and modules to import as well as the symbols available in them.

completion-for-imports

For all unused imports, WebStorm will show a warning. With the Optimize imports action (Ctrl-Alt-O), you can easily clean up all the unused imports and merge related import statements from the same file into one line.

optimize-imports-ng

Code completion in Angular components and templates

WebStorm will provide you with code completion results for any functions, methods, and properties, as well as for Angular-specific event and property bindings and inside them.

Here are a few examples:

angular2-event

angular2-completion

Inside any template you’ll get code completion for methods defined in the component:

angular2-directive-inline

Code completion suggestions and resolve work for custom event handlers defined in the component with the @Output decorator, for example:

angular2-custom-event

If you’ve defined a variable inside the template, you’ll get coding assistance and type inference for it later in the same template.

angular2-variables

In @Component decorator we can see suggestions for available properties, such as selector or template.

angular2-method-field

Documentation lookup

With the caret on Angular methods or functions, you can press F1 to quickly view documentation. You can also invoke Documentation right from code completions results.

angular2-doc

Navigation

One of the most useful shortcuts for navigating around the code is Ctrl-click (or Ctrl-B) on Windows and Linux and Cmd-click or Cmd-B on OS X – it takes you to the definition of any class, function, method, variable or component. It also allows you to jump to a different module from the import statement.

Some Angular-specific navigation includes:

  • Navigation to the file from the path in styleURLs and templateURL.
  • Jumping to the component definition (to the @Component where you have specified its name it the selector parameter) from its usage in the HTML file.
  • Navigation from a one-way binding in the component to the property defined using @Input in the component definition.

angular2-nav-to-input

Press Ctrl/Cmd-Alt-Left arrow to navigate right back to where you were.

Refactoring Angular components and methods

Refactoring options available in WebStorm can be a real time saver.
For component names you can use Refactor – Rename. Press Ctrl-T on the tag or selector property in the component definition and then select Rename.

angular2-rename-component

Rename also works for custom event handlers, class names and methods defined in the component.

angular2-rename-method

Compiling TypeScript

If you don’t have a fully set-up built process for your app, you may want to try a built-in TypeScript compiler. You can read about it in our How to compile TypeScript blog post.

Debugging Angular app

If you’d like to debug your Angular app created with Angular CLI in WebStorm, check out this step-by-step tutorial.

Also watch a recording of our webinars WebStorm: Angular 2 Tips and Tricks featuring John Lindquist and Using WebStorm for Building Angular Apps with Victor Savkin.

The WebStorm team

Comments below can no longer be edited.

81 Responses to Angular Workflow in WebStorm

  1. CHK says:

    April 6, 2016

    I think most of these features are not available in PHP Storm, How to enable them ? I suppose PHP Storm = Web Storm + PHP Backend Dev Features, am I right ?

    • Ekaterina Prigara says:

      April 6, 2016

      They are. Make sure your have an AngularJS plugin installed in Preferences | Plugins. If not, click Install JetBrains plugins and search for it.

      • waqas_kamran says:

        December 2, 2017

        is all that gonna work for angular 2+ too ? i means for latest versions . and how to avoid Tslint issues rules . thanks

        • Ekaterina Prigara says:

          December 4, 2017

          The plugin provides support both for Angular and AngularJS.
          What do you mean by “avoid TSLint issues rules”? If you don’t want to see errors from TSLint in the editor, you can enable that in Preferences | Languages & Frameworks | TypeScript | TSLint.

  2. CHK says:

    April 6, 2016

    Hi !
    I think that the plugin you’re talking about handles angularJS not angular 2.
    I installed it, the features shown in this post are not working, help appreciated.
    thanks

    • Ekaterina Prigara says:

      April 6, 2016

      No, this plugin provides support both for Angular 1 and 2. Which version of PhpStorm do you have? These features were introduced in PhpStorm and WebStorm 2016.1.

  3. Frank says:

    April 6, 2016

    Also no joy for Angular2 in PhpStorm 2016.1 after following your instructions.
    Same experience as CHK, the features shown in this post are not working in PhpStorm.

    • Ekaterina Prigara says:

      April 6, 2016

      Can you please check the AngularJS plugin version in Preferences | Plugins.

  4. Oleksandr Khomenko says:

    April 6, 2016

    Not sure how to enable those features in WebStorm. It doesn’t work in WS 2016.1 AngularJS Plugin: Version: 145.597.6

    https://imgur.com/v3L64Eo

  5. Yemi says:

    April 16, 2016

    Why is it that intellisense not working inside @Component decorator, but it is working elsewhere. For example, if i want to type in “selector”, there are no suggestions after pressing the “s” etc.

  6. Nikolay Kupstas says:

    April 24, 2016

    Is it available in IDEA?

    • Dennis Ushakov says:

      April 24, 2016

      Yes, it is. You need to install Angular plugin via Settings | Plugins

  7. Thomas Hourlier says:

    April 26, 2016

    Hi,

    Is it plan to support Dart without having to install the JS version of angular2?
    I don’t have auto-completion in my templates files in my Dart project.

    Thanks in advance.

    • Dennis Ushakov says:

      April 27, 2016

      We’re considering full-featured Angular2 Dart support, but we don’t have any estimates yet. It’s not on the roadmap for 2016.2

  8. Zack says:

    April 29, 2016

    If any of you had difficulty getting the new angular2 directives working in html, don’t forget to Settings > languages & frameworks > javascript > libraries and add angular2 from your node_modules or whatever your type definition preference is.

    I forgot to do this myself so all my html files were barking about unknown attributes. Hope this helps someone!

    • Ekaterina Prigara says:

      May 2, 2016

      Thanks for your comment. Tweaked a blog post a bit.

      • Michael says:

        May 21, 2016

        I’m using IDEA 2016.1 and Angular2 RC1.

        I did this but my HTML is still complaining, such that “*ngFor is not allowed here”. Any advice to fix that?

        • Ekaterina Prigara says:

          May 23, 2016

          Unfortunately, Angular 2 RC is only supported in the latest version of the plugin available with IntelliJ IDEA 2016.2 EAP. You can grab it here: https://blog.jetbrains.com/idea/2016/05/intellij-idea-2016-2-eap-is-open/

          • Anastasia says:

            May 23, 2016

            Sorry, this didn’t worked out for me. Installed the latest version of IntelliJ which you posted, but still getting the same error as Michael.

            Have I missed something?

            • Ekaterina Prigara says:

              May 24, 2016

              Can you please check the version of AngularJS plugin that you have installed. You can do that in Preferences | Plugins. It should be bigger than 162.74.13.

          • Kris says:

            June 2, 2016

            This also doesn’t work with Intellij 2016.1.2 / Angular 2.0.0-rc.1

            Version 162.74.13 is not available from via File -> Settings -> Plugins. And if I download it and try to add it manually from here ( https://plugins.jetbrains.com/plugin/6971?pr=idea ) I get a message that says it is incompatible.

          • Anna says:

            September 22, 2016

            Ok, guys, what am I missing? This post was for WebStorm, but the link above to a blog, as well as the plugin download link, are for IntelliJ. I tried installing the plugin in WebStorm, but I got an error that it is incompatible (and in fact, the download page lists it as compatible with IntelliJ IDEA, PhpStorm and RubyMine).

            So, how is there a fix for this for WebStorm? I’m using the latest version 2016.2.3.

            • Dennis Ushakov says:

              September 23, 2016

              AngularJS plugin is bundled into WebStorm, you don’t need to install it manually. Does something not work for you?

          • Anna says:

            September 23, 2016

            Constructs like this are marked as errors:

            The code runs as expected, but you wouldn’t know it if you relied on sysntax checker.

            • Dennis Ushakov says:

              September 23, 2016

              Sorry, but it seems that part with constructs was truncated somehow 🙁

        • Kris says:

          June 6, 2016

          Thank you Ekaterina for the response. I guess I miss read 2016.2 as 2016.1.2. I downloaded the early access version and now things work as expected.

          Thanks again,

          • Ekaterina Prigara says:

            June 6, 2016

            Great to hear that! 🙂
            By the way, IJ 2016.1.3 (stable version) with the fix has been released a couple of hours ago.

      • Tom Lo says:

        November 30, 2016

        Hi, I am using Angular 2.2.3 with PHPStorm 2016.3. Things are not working with Angular 2.2.3 added in Settings > languages & frameworks > javascript > libraries already. I use JSPM and SystemJs to construct my application. So the import statement is like: import {NgModule} from '@angular/core';

        Is it supported? How should I configure it in Preference?

        Please help please……

        • Ekaterina Prigara says:

          November 30, 2016

          Can you please tell what exactly is now working? Is your app in TypeScript or in JavaScript?

  9. David Losert says:

    May 3, 2016

    The Auto-Import Feature doesn’t work anymore (or never did) for NPM-Modules that contain a scope (or namespace) starting with ‘@’.

    This is critical as Angular2-Packages are all found under ‘@angular/’ since the newest Release-Candiate (rc.0).

    Is this gonna be fixed soon?

    • Ekaterina Prigara says:

      May 3, 2016

      Yes, we hope to fix this in the next bug-fix update. Here’s the issue on our issue tracker that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-21500

      • David Losert says:

        May 4, 2016

        Awesome, thanks!

  10. Andrew Camilleri says:

    May 6, 2016

    And yet you continue to ignore the Aurelia crowd. Cmon guys.

  11. Simon Sharp says:

    May 12, 2016

    What about running “ng build” from within Webstorm?

    “ng build” is a part of the angular2-cli and copies all the resource files into the dist folder.

    • Ekaterina Prigara says:

      May 12, 2016

      We’re planning to start working on the angular2-cli integration for WebStorm 2016.2 release. However, at the moment the plan is to mainly use it for creating a new Angular 2 project from the IDE Welcome screen: https://youtrack.jetbrains.com/issue/WEB-20722
      We’ll have a closer look at ng build and see what we can do. Would be really great if you report us a feature request about that. Thanks!

  12. Gianluca says:

    June 13, 2016

    I have noticed a problem with that code:

    @Component({
    selector: ‘reddit’,
    directives: [ArticleComponent],
    template: ...
    })

    The code is fine and compile but WS gives me an error “Argument type” when I add directives. I use Webstorm 2016.1.3

    • Ekaterina Prigara says:

      June 13, 2016

      What version of Angular 2 do you use? Can you please report us an issue with the screenshot of the error on https://youtrack.jetbrains.com/issues/WEB: so far we were not able to reproduce. Thank you!

      • Liran says:

        June 23, 2016

        I assume they are using RC.2, because I currently deal with the same issue on RC.3

        Here’s what you do to reproduce.
        This code alone will replicate the issue:

        @Component({
        selector: ‘child’,
        template: ‘child’
        })
        class ChildComponent {}

        @Component({
        selector: ‘parent’,
        template: ”,
        directives: [ChildComponent]
        })
        export class ParentComponent {}

        If you put ChildComponent in another array, that is.
        directives: [[ChildComponent]]
        The error goes away…

        • Ekaterina Prigara says:

          June 23, 2016

          Thanks! Reproduced in WebStorm 2016.1.3. It seems that we’ve already fixed that in WebStorm 2016.2. It’s currently in the Early access preview (you can download it here: https://confluence.jetbrains.com/display/WI/WebStorm+EAP), the final release is coming quite soon.

  13. Vitaly says:

    June 18, 2016

    File content from “5 MIN QUICKSTART” of Angular2 (https://angular.io/docs/ts/latest/quickstart.html)

    I see red lines under text in all *.ts files (“Unresolved variable or type fom”), what can be done?

    Example of code:

    import { Component } from ‘@angular/core’;
    @Component({
    selector: ‘my-app’,
    template: ‘My First Angular 2 App’
    })
    export class AppComponent { }

    This code compiled and works well in browser. Tried to install any related AngularJS plugins, but without success.

    Please assist

    • Ekaterina Prigara says:

      June 20, 2016

      What WebStorm version do you use?

  14. Joe Velez says:

    June 20, 2016

    I have a similar issue with PHPStorm 10.0.4 143.2370 crying that *ngFor is not allowed. (not a huge deal, but would like to resolve that issue)

    Attempting to install zip, version 162.646.2 from https://plugins.jetbrains.com/plugin/6971?pr=idea

    Throws error: Plugin ‘AngularJS’ is incompatible with this installation. I currently have 143.379.19 installed. Tried to remove, restart, and install 162, same error.

    Is there a solution now, or do I need to wait?
    Thx

  15. Tony says:

    June 23, 2016

    Just starting Angular 2 these few days. Do the features in this post supported in WebStorm 10.0.5 ? (still valid licence till 2018.) I seemed can’t get the code completion to work. Is it different from version 2016?
    Thanks!

    • Ekaterina Prigara says:

      June 24, 2016

      No, sorry, Angular 2 is supported only in WebStorm 2016.1 that you can download it on our website: https://jetbrains.com/webstorm/download/
      If you have a valid license till 2018, you can use all the newest versions released till this moment.

  16. Stephen Paul says:

    June 23, 2016

    I have just download V2015.6 and installed the Angular JS plugin.
    In the HTML, I noticed structural directives autocompleting (*ngIf) but not class variables/functions.
    Any ideas?

    • Stephen Paul says:

      June 23, 2016

      Apologies, version above is incorrect. I’m using ItelliJ 2016.1.3

    • Dennis Ushakov says:

      June 24, 2016

      Are you using inline template or external? External works only in latest EAPs

  17. Tony says:

    June 24, 2016

    Hi, I am using Webstorm 10.0.5, Following the instruction on this post, after running:
    npm install angular2 –save
    These are messages I got,
    npm WARN angular2@2.0.0-beta.17 requires a peer of es6-shim@^0.35.0 but none was installed.
    npm WARN angular2@2.0.0-beta.17 requires a peer of reflect-metadata@0.1.2 but none was installed.
    npm WARN angular2@2.0.0-beta.17 requires a peer of rxjs@5.0.0-beta.6 but none was installed.
    npm WARN angular2@2.0.0-beta.17 requires a peer of zone.js@^0.6.12 but none was installed.

    So there are no auto import, code completions, etc. features. I did read through other users’ post and did as many preferences settings as I can understand to do. Please let me know if my Webstorm version is the issue.
    Thanks!!

    • Tony Yu says:

      June 24, 2016

      Please discard this post, I post it before my previous post was answered. Thanks. After upgraded, it works as expected.

      • Ekaterina Prigara says:

        June 24, 2016

        Good to hear that!

  18. efe ozok says:

    August 25, 2016

    i have an custom import name that i configured in systemjs config. but when i import my modules from that custom name like “import {MyModule} from ‘@customlib/amodule'”, webstorm cannot resolve that directory because that name is not configured to find a path in webstorm. Is there a way to fix that problem like giving a allias name to @customlib so it searches in my root/source directory?

    • Andrey Starovoyt says:

      August 29, 2016

      Hi. Could you please share your system.js config?

  19. shrut says:

    September 28, 2016

    Hi i am looking for your suggestion on how i can plugin Spring in webstrom because my project is front end AngularJS and Controller java spring and database mongoDB . question is shall use intellij and plugin angularJS in there then how? or use webstrom and get plugin for spring then how and from where? Or is there any option to merge code after developemtn in seperate IDE webstrom and intellij

    • Dennis Ushakov says:

      September 30, 2016

      You can use IntelliJ with Angular plugin, it has same functionality as WebStorm

  20. Magnus B says:

    November 8, 2016

    How do I get it working for ionic 2 the same way. It fails to detect dependencies about 20% of the time.

    • Ekaterina Prigara says:

      November 9, 2016

      Can you please clarify a bit what do you mean by detecting dependencies? What is the result of that? Thanks!

  21. Franco Lee says:

    January 5, 2017

    The auto import feature is weird for me. For example, when I try to import ActivatedRoute instead for importing @angular/router, it imports node_modules/@angular/router/src instead. How can I fix this?

    • Andrey Starovoyt says:

      January 10, 2017

      Hi. Which IDE version do you use?

      • Hani says:

        February 4, 2017

        Same thing happening to me. On Intellij Ultimate 2016.3.4

      • Jinseoung says:

        March 12, 2017

        hi, i have same problem in my webstorm 16.3.4.
        could you tell me how to fix this issue?

        • Andrey Starovoyt says:

          March 13, 2017

          Could you please try WS2017.1?

          • Jinseoung says:

            March 14, 2017

            yeah, i did update ws 2017.1 and import via auto complete function. but still like this

            import { Component } from “../../../node_modules/@angular/core/src/metadata/directives”

        • Andrey Starovoyt says:

          March 14, 2017

          which angular version do you use?

          • Jinseoung Lee says:

            March 14, 2017

            i m using angular 2.4.9. here is my package.json file.

            {
            “name”: “ionic-hello-world”,
            “author”: “Ionic Framework”,
            “homepage”: “http://ionicframework.com/”,
            “private”: true,
            “scripts”: {
            “ionic:build”: “ionic-app-scripts build”,
            “ionic:serve”: “ionic-app-scripts serve”
            },
            “dependencies”: {
            “@angular/common”: “2.4.9”,
            “@angular/compiler”: “2.4.9”,
            “@angular/compiler-cli”: “2.4.9”,
            “@angular/core”: “2.4.9”,
            “@angular/forms”: “2.4.9”,
            “@angular/http”: “2.4.9”,
            “@angular/platform-browser”: “2.4.9”,
            “@angular/platform-browser-dynamic”: “2.4.9”,
            “@angular/platform-server”: “2.4.9”,
            “@ionic/storage”: “2.0.0”,
            “angular2-swing”: “^0.10.0”,
            “angularfire2”: “^2.0.0-beta.7-pre”,
            “firebase”: “^3.7.1”,
            “ionic-angular”: “2.2.0”,
            “ionic-native”: “2.8.1”,
            “ionicons”: “3.0.0”,
            “rxjs”: “5.2.0”,
            “sw-toolbox”: “3.6.0”,
            “zone.js”: “0.8.0”
            },
            “devDependencies”: {
            “@ionic/app-scripts”: “1.1.4”,
            “typescript”: “2.2.1”
            },
            “description”: “ion_dating_app: An Ionic project”,
            “cordovaPlugins”: [
            “cordova-plugin-device”,
            “cordova-plugin-console”,
            “cordova-plugin-whitelist”,
            “cordova-plugin-splashscreen”,
            “cordova-plugin-statusbar”,
            “ionic-plugin-keyboard”
            ],
            “cordovaPlatforms”: []
            }

            perhaps, it is not support angular 2.4.x?

        • Andrey Starovoyt says:

          March 14, 2017

          it must work for Angular 2.4.*. Please, check that node_modules directory is excluded from the project

          • Jinseoung Lee says:

            March 14, 2017

            im so sorry to you. really.

            i dont know why occurred issue, but i delete .idea directory in my project and reloaded from webstorm. its work properly. maybe something wrong.

            thanks for your help kindly.

  22. Heinrich Göbl says:

    February 16, 2017

    Hi Kate, is there an easy way to open TypeScript file and template HTML file side-by-side?
    It’s easy to navigate from one file to the other, but often it’s comfortable to have both files visible at the same time. I’ve seen the video from Victor Savkin about WebStorm and Angular, but he doesn’t show how to do this. “split vertically” and replace the file is a bit cumbersome.

  23. Amedeo says:

    April 20, 2017

    That warning about with the *ng tags is still happening, even with WebStorm 2017.1.
    It always tells me “Attribute *ngFor is not allowed here.” and the tag is highlighted yellow. But the code works fine.

    Also the project wizard still relies on the angular-seed repo, which is clearly meant only for AngularJS and not Angular2. Making use of Angular CLI would be better I guess. It already works for creating new components etc. Why not use it to create and run projects?

    • Ekaterina Prigara says:

      April 21, 2017

      A fix for *ng attributes will be available in WebStorm 2017.2, for a full support please follow this issue.
      It’s possible now to generate a project with Angular CLI from the Welcome screen.

  24. satheessh says:

    July 2, 2017

    I created a angular 4 project using angular cli. I am able to run the project (i.e starting server) from terminal using command “ng serve”. is it possible i can the command or its equivalent from web storm ids ? I tried to find documentation for that, but i couldn’t

    • Ekaterina Prigara says:

      July 3, 2017

      You can run npm start task from the npm tool window in the IDE.

  25. Stephen Buckley says:

    November 15, 2017

    Is there a way to set the auto import to use single quotes so you end up with this:
    import {Component} from ‘@angular/core’;
    rather than this :
    import {Component} from “@angular/core”;
    The latter seems to be the default, which for a project with tslint enabled instantly causes a linting error.

    Any way to set the import preference?

    • Ekaterina Prigara says:

      November 15, 2017

      You can set this option yourself in Preferences | Editor | Code Style | TypeScript – Punctuation – Use single quotes always.
      Or you can open project’s tsconfig.json and agree with the IDE suggestion on top of the file to apply the code style rules in it to the IDE (please note that only some rules that match WebStorm’s code style settings are applied).