Angular workflow in WebStorm

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.

– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature, Tutorials and tagged , , . Bookmark the permalink.

81 Responses to Angular workflow in WebStorm

  1. CHK says:

    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:

      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:

        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:

          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:

    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:

      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:

    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.

  4. Oleksandr Khomenko says:

    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:

    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:

    Is it available in IDEA?

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

      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:

    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:

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

      • Michael says:

        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:

          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: http://blog.jetbrains.com/idea/2016/05/intellij-idea-2016-2-eap-is-open/

          • Anastasia says:

            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:

            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:

            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.

          • Ekaterina Prigara says:

            Please have a look at the comment above. Angular 2 RC is supported in IntelliJ IDEA 2016.2 EAP that you can download here: https://confluence.jetbrains.com/display/IDEADEV/IDEA+2016.2+EAP
            The fix will also land in IJ 2016.1.3 that has not been release yet.

          • Anna says:

            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:

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

          • Anna says:

            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:

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

        • Kris says:

          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:

            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:

        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……

  9. David Losert says:

    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?

  10. Andrew Camilleri says:

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

  11. Simon Sharp says:

    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:

      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:

    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:

      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:

        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…

  13. Vitaly says:

    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

  14. Joe Velez says:

    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:

    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!

  16. Stephen Paul says:

    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?

  17. Tony says:

    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!!

  18. efe ozok says:

    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?

  19. shrut says:

    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

  20. Magnus B says:

    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:

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

  21. Franco Lee says:

    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:

      Hi. Which IDE version do you use?

      • Hani says:

        Same thing happening to me. On Intellij Ultimate 2016.3.4

      • Jinseoung says:

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

        • Andrey Starovoyt says:

          Could you please try WS2017.1?

          • Jinseoung says:

            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:

          which angular version do you use?

          • Jinseoung Lee says:

            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:

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

          • Jinseoung Lee says:

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

    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:

      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:

    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

  25. Stephen Buckley says:

    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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *