ReferenceError: angular is not defined in WebStorm

Question

I'm completely 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._compile (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._compile (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 components
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_components/angular/angular.js"></script>
  <script src="bower_components/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._compile (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

Answer 1

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