CODEWITHSUNDEEP
angularjswebstorm
RBR
RBR

Reputation: 999

WebStorm - "angular" is not defined

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

Description:

I have the following in my index.html file:

<script src="vendor/js/angular.min.js"></script>
<script src="app/js/scratch.js"></script>

In scratch.js when I reference "angular" I keep getting this "angular is not defined" message from JSHint. How do I make it so angular is seen as defined in this file so JSHint stops complaining about it? Is this a configuration issue? Please advise.

WebStorm v7.0.3 / Mac OSX v10.9.1

Upvotes: 20

Views: 19974

Answers (5)

FoxMulder900
FoxMulder900

Reputation: 1291

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.

Upvotes: 1

adimauro
adimauro

Reputation: 333

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.

Upvotes: 2

coolicz
coolicz

Reputation: 391

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.

Upvotes: 39

nitya
nitya

Reputation: 161

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.

Upvotes: 3

JB Nizet
JB Nizet

Reputation: 691645

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.

Upvotes: 23

Related Questions