Search code examples
angularjsintellij-ideatypescriptwebstormgrunt-ts

What exactly I should do to make 'angular' resolved in .ts file in WebStorm

I wonder.. what exactly I should do to make WebStrom (or IntelliJ IDEA) resolve my 'angular' variable.

I follows this guy but that maybe deprecated already.

On my vendor.d.ts:

/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/angularjs/angular.d.ts" />

My package json:

{
  "name": "angular_ts",
  "version": "0.1.0",
  "description": "",
  "repository": {},
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-ts": "~3.0.0"
  }
}

My issue on that screenshot ('angular' is not resolved.. can not go to definition of it, as a result - multiple implementations of 'module'): angular is not resolved, having multiple implementations

So, what exactly I should do to make 'angular' resolved in .ts file in WebStorm?

UPDATE: I do not have yet angularjs sources in my project. But one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.

Solution

  • You have to do a few things to get this to work correctly. I don't know what that tutorial told you to do, but it's not the WebStorm usual way of doing it.

    Firstly, you need to make WebStorm ignore all the AngularJS source files in your project. This is why you're getting the multiple implementations warning.

    • Open your "project" side panel that displays the file tree.
    • Find where you put your angular.min.js source files, and right click the file.
    • Select "Mark as Plain Text". WebStorm will now ignore that file from intellisense for JavaScript.

    You have to now add AngularJS to your list of External Libraries for that project.

    • Click "File / Settings"
    • Expand the "Languages & Frameworks" node
    • Expand the "JavaScript" node
    • Select the "Libraries" section.

    This is where you install third-party TS files for libraries. Select the "angularjs-DefinitelyTyped" library, but this doesn't come with WebStorm. You have to download and install it.

    • Click the "Download..." button.
    • Change the dropdown on the dialog from "Official libraries" to "TypeScrypt community stubs".
    • Find "angularjs", select it and click "Download and Install".

    That's basically what I do. The key is to exclude the JS files in your project that will interfere with intellisense.

    When you install external libraries to a WebStorm project via the settings. It doesn't actually add those files to the project. They are only added to the intellisense space used by the IDE.