javascript - "Failed to instantiate module 'app' due to" in angular and mean stack - Stack Ove

So I recently played around mean stack with express node jade and angular; and actually I think there is a problem in jade somehow; and I apologise for plexity, but I really can not figure it out, hoping for some different view from the outside; so here is the case:

the message itself:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:

Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

.3.3/$injector/nomod?p0=app
    at .3.3/angular.js:63:12

ok, We go to 63 of angular js: return new ErrorConstructor(message); -> well, it tells nothing, but some idea that the problem is really hiding in nowhere;

    at .3.3/angular.js:1747:17

go to this 1747 either: throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " + -> again nothing to understand here; so what do you think of it?

    at ensure (.3.3/angular.js:1671:38)
    at module (.3.3/angular.js:1745:14)
    at .3.3/angular.js:4041:22
    at forEach (.3.3/angular.js:322:20)
    at loadModules (.3.3/angular.js:4025:5)
    at createInjector (.3.3/angular.js:3951:11)
    at doBootstrap (.3.3/angular.js:1434:20)
    at bootstrap (.3.3/angular.js:1455:12)
.3.3/$injector/modulerr?p0=app&p1=Error%3A%20%….googleapis%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.js%3A1455%3A12) 

File structure:

_client
   vendor //for bower installations
   styles 
   application
      angularCore.js

_server
   views
      core.jade
      states
         home.html

server.js

>

server.js :


==stuff===

app.set('views', path.join(__dirname, '_server/views'));
app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, '_client/')));

app.get('/states/:Path', function(req, res) {
   res.render('states/' + res.params.Path + '.html');
 });

 app.get('*', function(req, res) {
   res.render('core');
   console.log(res);
 });

==stuff==

_server/views/core.jade :

doctype html
html(lang="en")
  head
    link(rel="shortcut icon", href="favicon.ico", type="image/x-icon")
    link(rel="stylesheet", href="styles/bootstrap.css")
    link(rel="stylesheet", href="vendor/toastr/toastr.min.css")
    link(rel="stylesheet", href="styles/core.css")

  body(ng-app='app')
    div(ng-view)
     h1 Some text

    script(type='text/javascript', src='vendor/jquery/dist/jquery.min.js')
    script(type='text/javascript', src='.3.3/angular.js')
    script(type='text/javascript', src='.3.3/angular-route.js')
    script(type='text/javascript', src='.3.3/angular-resource.js')
    script(type='text/javascript', src='./application/angularCore.js')

_client/application/angularCore.js :

var app = angular.module('app', ['ngResource', 'ngRoute']);

app.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5mode(true);
  $routeProvider
    .when('/', {
      templateUrl: '/states/home',

so, coz of a problem states/home.html not loaded in network tab as i see;

      controller: 'controllerMain'
    });
  }


app.controller('controllerMain', function($scope) {
  $scope.myVar = "Hello peolm";
});

_server/views/states/home.html:

<h1>That's the state home</h1>
<h2>{{myVar}}</h2>

So the logic of app is go to localhost:3030 to '/', then due to angular's

when('/', {
      templateUrl: '/states/home',

and express's

app.get('/states/:Path', function(req, res) {
   res.render('states/' + res.params.Path);
 });

receive home.html and we're good, but home.html not rendered, not even loaded, and I don't know because of what; All of the files downloaded by browser, by client, except 'home.html';

So that's the main question: all are downloaded, my why cant it find 'app' module?

So I recently played around mean stack with express node jade and angular; and actually I think there is a problem in jade somehow; and I apologise for plexity, but I really can not figure it out, hoping for some different view from the outside; so here is the case:

the message itself:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:

Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

http://errors.angularjs/1.3.3/$injector/nomod?p0=app
    at https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:63:12

ok, We go to 63 of angular js: return new ErrorConstructor(message); -> well, it tells nothing, but some idea that the problem is really hiding in nowhere;

    at https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:1747:17

go to this 1747 either: throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " + -> again nothing to understand here; so what do you think of it?

    at ensure (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:1671:38)
    at module (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:1745:14)
    at https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:4041:22
    at forEach (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:322:20)
    at loadModules (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:4025:5)
    at createInjector (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:3951:11)
    at doBootstrap (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:1434:20)
    at bootstrap (https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js:1455:12)
http://errors.angularjs/1.3.3/$injector/modulerr?p0=app&p1=Error%3A%20%….googleapis.%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.js%3A1455%3A12) 

File structure:

_client
   vendor //for bower installations
   styles 
   application
      angularCore.js

_server
   views
      core.jade
      states
         home.html

server.js

>

server.js :


==stuff===

app.set('views', path.join(__dirname, '_server/views'));
app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, '_client/')));

app.get('/states/:Path', function(req, res) {
   res.render('states/' + res.params.Path + '.html');
 });

 app.get('*', function(req, res) {
   res.render('core');
   console.log(res);
 });

==stuff==

_server/views/core.jade :

doctype html
html(lang="en")
  head
    link(rel="shortcut icon", href="favicon.ico", type="image/x-icon")
    link(rel="stylesheet", href="styles/bootstrap.css")
    link(rel="stylesheet", href="vendor/toastr/toastr.min.css")
    link(rel="stylesheet", href="styles/core.css")

  body(ng-app='app')
    div(ng-view)
     h1 Some text

    script(type='text/javascript', src='vendor/jquery/dist/jquery.min.js')
    script(type='text/javascript', src='https://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular.js')
    script(type='text/javascript', src='http://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular-route.js')
    script(type='text/javascript', src='http://ajax.googleapis./ajax/libs/angularjs/1.3.3/angular-resource.js')
    script(type='text/javascript', src='./application/angularCore.js')

_client/application/angularCore.js :

var app = angular.module('app', ['ngResource', 'ngRoute']);

app.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5mode(true);
  $routeProvider
    .when('/', {
      templateUrl: '/states/home',

so, coz of a problem states/home.html not loaded in network tab as i see;

      controller: 'controllerMain'
    });
  }


app.controller('controllerMain', function($scope) {
  $scope.myVar = "Hello peolm";
});

_server/views/states/home.html:

<h1>That's the state home</h1>
<h2>{{myVar}}</h2>

So the logic of app is go to localhost:3030 to '/', then due to angular's

when('/', {
      templateUrl: '/states/home',

and express's

app.get('/states/:Path', function(req, res) {
   res.render('states/' + res.params.Path);
 });

receive home.html and we're good, but home.html not rendered, not even loaded, and I don't know because of what; All of the files downloaded by browser, by client, except 'home.html';

So that's the main question: all are downloaded, my why cant it find 'app' module?

• javascript
• angularjs
• node.js
• express
• pug

Share Improve this question Follow edited Nov 22, 2014 at 19:46 Vh Ambr asked Nov 22, 2014 at 19:08 Vh AmbrVh Ambr 7511 silver badge77 bronze badges 8

• is your angularCore.js file in the _client/app/ directory or in /application/? The error is clear that it cannot load the app module, which seems to indicate that the script isn't loading correctly. it is unusual to see ./ in the src path. – Claies Commented Nov 22, 2014 at 19:34
• oh, that was my bad, it is actually in 'application'; – Vh Ambr Commented Nov 22, 2014 at 19:37
• the src for your javascript file should be relative to the root of the application, not relative to the jade file, so ./ doesn't seem to make sense. are you able to download the js file if you browse to http://youserver./application/angularCore.js? If so, I suspect removing the . would fix the script loading. – Claies Commented Nov 22, 2014 at 19:42
• in the Developer Console on the network tab, you should be able to see the file that is ing back 404, causing the module to not be available. – Claies Commented Nov 22, 2014 at 19:43
• './' do not making changes at all, I was trying all the variations to find a solution; All of the files downloaded by browser, by client, except 'home.html'; So that's the main question: all are downloaded, my why cant it find 'app' module? – Vh Ambr Commented Nov 22, 2014 at 19:45

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

It's hilarious.

The problem was here: $locationProvider.html5mode(true); well, there is no html5mode, but html5Mode;

On first glance I think your are missing .html here

app.get('/states/:Path', function(req, res) { 
   res.render('states/' + res.params.Path + '.html');
});