Uncaught syntax error in AngularJS application

Question

im getting my feet wet with an Angular and firebase app. I have run in to the following console error. I'd appreciate if you can help me figure out what's the problem as i am unable to figure it out.

Also, I have inculded this script in the index.html

  app.js:44 Uncaught SyntaxError: Unexpected token .
angular.js:68 Uncaught Error: [$injector:nomod] Module 'ngClassifieds' 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.org/1.5.0/$injector/nomod?p0=ngClassifieds(anonymous function) @ angular.js:68(anonymous function) @ angular.js:2015ensure @ angular.js:1939module @ angular.js:2013(anonymous function) @ classifieds.ctr.js:6(anonymous function) @ classifieds.ctr.js:86
angular.js:68 Uncaught Error: [$injector:nomod] Module 'ngClassifieds' 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.org/1.5.0/$injector/nomod?p0=ngClassifieds(anonymous function) @ angular.js:68(anonymous function) @ angular.js:2015ensure @ angular.js:1939module @ angular.js:2013(anonymous function) @ classifieds.fac.js:6(anonymous function) @ classifieds.fac.js:28
angular.js:68 Uncaught Error: [$injector:nomod] Module 'ngClassifieds' 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.org/1.5.0/$injector/nomod?p0=ngClassifieds(anonymous function) @ angular.js:68(anonymous function) @ angular.js:2015ensure @ angular.js:1939module @ angular.js:2013(anonymous function) @ auth.ctr.js:6(anonymous function) @ auth.ctr.js:44
angular.js:68 Uncaught Error: [$injector:nomod] Module 'ngClassifieds' 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.org/1.5.0/$injector/nomod?p0=ngClassifieds(anonymous function) @ angular.js:68(anonymous function) @ angular.js:2015ensure @ angular.js:1939module @ angular.js:2013(anonymous function) @ auth.fac.js:6(anonymous function) @ auth.fac.js:18
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngClassifieds due to:
Error: [$injector:nomod] Module 'ngClassifieds' 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.org/1.5.0/$injector/nomod?p0=ngClassifieds
    at http://localhost:8080/node_modules/angular/angular.js:68:12
    at http://localhost:8080/node_modules/angular/angular.js:2015:17
    at ensure (http://localhost:8080/node_modules/angular/angular.js:1939:38)
    at module (http://localhost:8080/node_modules/angular/angular.js:2013:14)
    at http://localhost:8080/node_modules/angular/angular.js:4503:22
    at forEach (http://localhost:8080/node_modules/angular/angular.js:321:20)
    at loadModules (http://localhost:8080/node_modules/angular/angular.js:4487:5)
    at createInjector (http://localhost:8080/node_modules/angular/angular.js:4409:19)
    at doBootstrap (http://localhost:8080/node_modules/angular/angular.js:1691:20)
    at bootstrap (http://localhost:8080/node_modules/angular/angular.js:1712:12)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ngClassifieds&p1=Er…3A%2F%2Flocalhost%3A8080%2Fnode_modules%2Fangular%2Fangular.js%3A1712%3A12)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4526forEach @ angular.js:321loadModules @ angular.js:4487createInjector @ angular.js:4409doBootstrap @ angular.js:1691bootstrap @ angular.js:1712angularInit @ angular.js:1606(anonymous function) @ angular.js:30423trigger @ angular.js:3108defaultHandlerWrapper @ angular.js:3398eventHandler @ angular.js:3386

The code referenced in the error above is as follows:

angular.module('ngClassifieds', ['ngMaterial', 'ui.router', 'firebase'])


.run(["$rootScope", "$state", function($rootScope, $state) {
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
  // We can catch the error thrown when the $requireAuth promise is rejected
  // and redirect the user back to the home page
  if (error === "AUTH_REQUIRED") {
    $state.go("auth");
  }
});
}]);




.config(function($mdThemingProvider, $stateProvider, $urlRouterProvider) {

    $mdThemingProvider
        .theme('default')
        .primaryPalette('blue-grey')
        .accentPalette('orange');


    $urlRouterProvider.otherwise('/auth');


     $stateProvider
        .state('auth', {
          url: '/auth',
          templateUrl: 'components/auth/auth.tpl.html',
          controller: 'authCtrl',

        })

    $stateProvider
        .state('masters', {
            url: '/masters',
            templateUrl: 'components/classifieds.tpl.html',
            controller: 'classifiedsCtrl',
            resolve: {
              // controller will not be loaded until $requireAuth resolves
              // Auth refers to our $firebaseAuth wrapper in the example above
              "currentAuth": ["auth", function(auth) {
                // $requireAuth returns a promise so the resolve waits for it to complete
                // If the promise is rejected, it will throw a $stateChangeError (see above)
                return auth.ref.$requireAuth();
              }]
            }


        });
});

Have you declared it in your html, body or which element ever like: <html lang="en" ng-app="ngClassifieds">? — thepio
– thepio, Commented May 12, 2016 at 12:49
Yes. the codereference above is the file -- app.js and i have included it as a script in the index.html — Nosail
– Nosail, Commented May 12, 2016 at 12:50
yes that can also be reason @thepio and what is app.js line 44? — Rakesh Chand
– Rakesh Chand, Commented May 12, 2016 at 12:50
@thepio yes.. i have @Rakeschand line 44 is .config(function($mdThemingProvider, $stateProvider, $urlRouterProvider) { — Nosail
– Nosail, Commented May 12, 2016 at 12:53

thepio · Accepted Answer · 2016-05-12 13:01:38Z

I would imagine your problem is cause by this line of code:

.run(["$rootScope", "$state", function($rootScope, $state) {
  $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
  // We can catch the error thrown when the $requireAuth promise is rejected
  // and redirect the user back to the home page
  if (error === "AUTH_REQUIRED") {
    $state.go("auth");
  }
});
}]);

You are closing it with semicolons and so the config and rest of the stuff is not going to run. You should remove the semicolon and have it like this:

.run(["$rootScope", "$state", function($rootScope, $state) {
  $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
    // We can catch the error thrown when the $requireAuth promise is rejected
    // and redirect the user back to the home page
    if (error === "AUTH_REQUIRED") {
      $state.go("auth");
    }
  });
}])

Walfrat · Accepted Answer · 2016-05-12 12:51:00Z

1

When you have a syntax error in a javascript file, the whole file isn't parsed so your module end up not exists for the other javascript file of your application.

So the very 1st message is the true important one : the SyntaxError

I counted roughly and end up there :

 return auth.ref.$requireAuth();

the word ref may cause trouble try auth['ref'].$requireAuth()

answered May 12, 2016 at 12:51

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Collectives™ on Stack Overflow

Uncaught syntax error in AngularJS application

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related