I'm pletely new to AngularJS and I might have missed some crucial but not obvious step along the way of starting a new AngularJS project in WebStorm.

I installed Node.JS, installed Angular with npm, I even installed bower, I even installed angular in bower, but at this point I'm not sure what I am missing.

On Debug, I get the following message:

c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6
angular.module('myApp', [
^
ReferenceError: angular is not defined
    at Object.<anonymous> (c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6:1)
    at Module._pile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain [as _onTimeout] (module.js:497:10)
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

On Run, I get the following message:

c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6
angular.module('myApp', [
^
ReferenceError: angular is not defined
    at Object.<anonymous> (c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6:1)
    at Module._pile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

App.js is the following

'use strict';



// Declare app level module which depends on views, and ponents
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

And yes, the order of Angular in the HTML is the following:

  <script src="bower_ponents/angular/angular.js"></script>
  <script src="bower_ponents/angular-route/angular-route.js"></script>
  <script src="app.js"></script>

It's funny because I'm literally just trying to run the basic template generated with WebStorm.

Run Configuration has

 Node Interpreter: C:\Program Files\nodejs\node.exe
 Working directory: C:\Users\YourUser\WebstormProjects\angularjs-template
 JavaScript file: app\app.js
 After launch: http://localhost:63342/angularjs-template/app/index.html

And nope! Angular is undefined.

What on earth am I doing wrong?

EDIT: Exact output

"C:\Program Files (x86)\JetBrains\WebStorm 9.0.1\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" app\app.js

c:\Users\Zhuinden\WebstormProjects\angularjs-template\app\app.js:6
angular.module('myApp', [
^
ReferenceError: angular is not defined
    at Object.<anonymous> (c:\Users\Zhuinden\WebstormProjects\angularjs-template\app\app.js:6:1)
    at Module._pile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Process finished with exit code 8

I'm pletely new to AngularJS and I might have missed some crucial but not obvious step along the way of starting a new AngularJS project in WebStorm.

I installed Node.JS, installed Angular with npm, I even installed bower, I even installed angular in bower, but at this point I'm not sure what I am missing.

On Debug, I get the following message:

c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6
angular.module('myApp', [
^
ReferenceError: angular is not defined
    at Object.<anonymous> (c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6:1)
    at Module._pile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain [as _onTimeout] (module.js:497:10)
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

On Run, I get the following message:

c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6
angular.module('myApp', [
^
ReferenceError: angular is not defined
    at Object.<anonymous> (c:\Users\YourUser\WebstormProjects\angularjs-template\app\app.js:6:1)
    at Module._pile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

App.js is the following

'use strict';



// Declare app level module which depends on views, and ponents
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

And yes, the order of Angular in the HTML is the following:

  <script src="bower_ponents/angular/angular.js"></script>
  <script src="bower_ponents/angular-route/angular-route.js"></script>
  <script src="app.js"></script>

It's funny because I'm literally just trying to run the basic template generated with WebStorm.

Run Configuration has

 Node Interpreter: C:\Program Files\nodejs\node.exe
 Working directory: C:\Users\YourUser\WebstormProjects\angularjs-template
 JavaScript file: app\app.js
 After launch: http://localhost:63342/angularjs-template/app/index.html

And nope! Angular is undefined.

What on earth am I doing wrong?

EDIT: Exact output

"C:\Program Files (x86)\JetBrains\WebStorm 9.0.1\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" app\app.js

c:\Users\Zhuinden\WebstormProjects\angularjs-template\app\app.js:6
angular.module('myApp', [
^
ReferenceError: angular is not defined
    at Object.<anonymous> (c:\Users\Zhuinden\WebstormProjects\angularjs-template\app\app.js:6:1)
    at Module._pile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Process finished with exit code 8

• javascript
• angularjs
• node.js
• webstorm

• Technically, I'm going to laugh if my problem was that I had to install angular with bower install angular with the terminal, and THEN i had to run index.html rather than run it as a node.js app. Does anyone know the truth? – EpicPandaForce Commented Dec 7, 2014 at 21:29
• do you see any error in console except angular is not defined? – Grundy Commented Dec 7, 2014 at 21:31
• @Grundy I posted it what the IDE says in an edit – EpicPandaForce Commented Dec 7, 2014 at 21:34
• possibly you need remove JavaScript file: app\app.js from run configuration – Grundy Commented Dec 7, 2014 at 21:37
• @Grundy then it says Error: please specify path to App JS File correctly. although I'm starting to wonder if I should really be using a Node.JS run configuration for this. – EpicPandaForce Commented Dec 7, 2014 at 21:38

3 Answers 3

Angular code can't be run with node.js. Steps to start with a new Angular project in WebStorm:

1. create a new Angular project using File/New project

2. open built-in terminal, run 'npm install'

3. right-click app/index.html, choose 'Debug' - your Angular application will be run on WebStorm built-in server

It looks like you are trying to run app.js on node.js. I think in project template should exist server's js file for that.

You have to run the index.html, not the app.js as usual. Algo in the root folder of the project you can run npm start and it will run up the server with the page in the port:8000