WebStorm - “angular” is not defined

Question

NOTE: This is a WebStorm issue, not an angular.js issue.

Screencast of the problem: http://f.cl.ly/items/302s0d1k1i3i1B2p0W09/ws703-angular-not-defined.mp4

Descr

Answer 1

The very first example in the documentation page of JSHint is the following:

Configuration file is a simple JSON file that specifies which JSHint options to turn on or off. For example, the following file will enable warnings about undefined and unused variables and tell JSHint about a global variable named MY_GLOBAL.

{
  "undef": true,
  "unused": true,
  "globals": { "MY_GLOBAL": false }
}

Replace MY_GLOBAL with angular, and you won't have this JSHint warning anymore.

Answer 2

In

Webstorm settings > JavaScript > Code Quality Tools > JSHint 

there is "Predefined" line. Click on "Set" next to it. Here you can add all your predefined variables.

Answer 3

In case it helps:

I used yeoman (yo angular) to scaffold a basic project and got the same 'angular is not defined' problem in WebStorm 8 (where I have the AngularJS plugin by default). However, I've seen others do this and not have the same issue.

The solution selected above is correct in the JSHint needs to be told about the global variable called "angular". However, if you use yeoman, the required configuration settings will already be defined in .jshintrc (a file in your scaffolded directory).

So all you need to do is have JSHint use these as the default settings for the project. To do this, I found the following SO thread useful to explicitly set the location of that config file. JSHint behave differently in Webstorm and Grunt

In WebStorm 8, you will see an option called "Use config files" -- checking that will automatically look for a .jshintrc file in your project hierarchy. Selecting this will make the 'angular is not defined' issue go away for good.

Answer 4

Go to Settings > Plugins and download the AngularJS plugin for WebStorm. That's the first thing I did before using AngularJS with WebStorm, and I never saw that issue.

Version 8 of WebStorm will have AngularJS fully baked in, but for now, that plugin should help.

Edit: Ok, I think I may have found another possible solution. As you said, it's a WebStorm issue. There is no actual error in the code, it's just a code inspection. You can turn off this inspection like this:

Go to settings > inspections > JavaScript > General and uncheck "unresolved JavaScript variable" and "unresolved JavaScript function".

This should make the error go away. I found this while going through an AngularJS tutorial on Pluralsight.

Answer 5

To make WebStorm (2016+) properly recognize angularjs and even enable code completion, simply go to:

File > Settings

Then on the left, select:

Languages & Frameworks > JavaScript > Libraries

Mark the checkbox next to 'angular' and click Apply. If angular does not appear in the list, you will need to click 'Add' and browse to wherever you have the library downloaded.