CODEWITHSUNDEEP
javascriptangularjsnode.jswebstorm
EpicPandaForce
EpicPandaForce

Reputation: 81539

ReferenceError: angular is not defined in WebStorm

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

Upvotes: 8

Views: 11504

Answers (3)

Franco Manzur
Franco Manzur

Reputation: 373

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

Upvotes: 0

lena
lena

Reputation: 93728

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

Upvotes: 12

Mikalai
Mikalai

Reputation: 1525

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.

Upvotes: 0

Related Questions