'Uncaught TypeError: undefined is not a function' when putting controllers/services in a separate js file

Question

I am trying to separate my controllers and services (previously all in my one app.js file) into separate js files. However I am getting a Uncaught TypeError: undefined is not a function from the first line of one of my separated services (authInterceptorService shown below).

Here is the module code from my app.js:

var app = angular.module('AngularAuthApp', [
    'ngRoute',
    'LocalStorageModule',
    'angular-loading-bar'
]);

//some app.constants

Here is my service in a separate authInterceptorService.js file (Uncaught TypeError happens on the first line:

app.factory('authInterceptorService', [
    '$q',
    '$injector',
    '$location',
    'localStorageService',
    function ($q, $injector, $location, localStorageService) {

//more code

        return authInterceptorServiceFactory;
    }
]);

Am I missing a piece of proper syntax? I thought I followed the example provided in this stack post. I am also referencing these separate js files in my html. Please let me know if I am missing something in my controller or module setup, or if I should be doing this another way.

Thank you very much for your time. Let me know if you need additional information or if I am being unclear.

I hope you have loaded app.js before any other js files in your index.html :) — Vaibhav Pachauri, Jul 07 '15 at 17:25
Do you have back-end for the website? If you do, you need to clean the caches and redeploy your website online. — Shaohao, Jul 07 '15 at 17:31

score 0 · Answer 1 · edited Jul 07 '15 at 17:25

0

Put authInterceptorService in your app.js dependencies.

So:

var app = angular.module('AngularAuthApp', ['ngRoute', 'LocalStorageModule', 'authInterceptorService', 'angular-loading-bar']);

edited Jul 07 '15 at 17:25

pmandell

4,288
17
21

answered Jul 07 '15 at 17:24

Daniel Jamrozik

1,228
2
11
25

The `authInterceptorService` isn't a separate module, it's a service on the main module. – kiswa Jul 07 '15 at 18:04

score 0 · Answer 2 · answered Jul 07 '15 at 17:26

From: http://briantford.com/blog/huuuuuge-angular-apps

Modules

Define and configure all modules in "app.js": this means authInterceptorService

angular.module('yourAppName', ['yourAppDep']);
angular.module('yourAppDep');

Define controllers, services, etc. on modules like this:

angular.module('yourAppDep').controller('MyCtrl', function () {
  // ...
});

Although we (the AngularJS team) have discussed being able to lazy-load at the module granularity, it's not yet on the roadmap for the next version of Angular. There was a good discussion on Google+ about using multiple top-level AngularJS apps to produce a lazy-loading-like effect. I haven't tried it or seen it done, but if you desperately need to reduce payload size, that's certainly one way to do it. The only remaining question is how to subdivide controllers, directives, services, and filters into modules. The Angular Seed puts filters, services, and directives into separate modules, but that seems a bit silly to me. Depending on the app, I'd be more inclined to organize modules by page/route. From a performance perspective, it doesn't really matter how you organize your modules, so choose whatever method best suits your project.

score 0 · Answer 3 · answered Jul 07 '15 at 17:44

Rather than using the global app why not do it like this?

angular.module('AngularAuthApp', [
    'ngRoute',
    'LocalStorageModule',
    'angular-loading-bar'
]);

Then this should work for your service:

angular
.module('AngularAuthApp')
.factory('authInterceptorService', [
    '$q',
    '$injector',
    '$location',
    'localStorageService',
    function ($q, $injector, $location, localStorageService) {

//more code

        return authInterceptorServiceFactory;
    }
]);

'Uncaught TypeError: undefined is not a function' when putting controllers/services in a separate js file

3 Answers3