Karma complains 'Module is not available'

Question

Up until a couple days ago my unit tests were running well and my code ran in the browser flawlessly. Then I noticed this after I added a stub module called 'profile':

INFO [karma]: Karma v0.12.24 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket 7W-0vnkWZaWxYYtwFrhT with id 9336780
PhantomJS 1.9.7 (Mac OS X) ERROR
  Error: [$injector:nomod] Module 'profile' 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.

Now, I realise this is the most common AngularJS error on earth, and I've gotten pretty good at debugging this, but for the life of me I can't make this go away. The details:

• The code works in the browser with no errors.

• Karma picks up my files this way:

      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'node_modules/angular-ui-router/release/angular-ui-router.js',
      'node_modules/angular-bootstrap/ui-bootstrap.js',
      'node_modules/angular-ui-form-validation/dist/angular-ui-form-validation.js',
      'node_modules/angular-animate/angular-animate.js',
      'client/app/**/*.js'
  

• The main module has a dependency on 'profile' declared already.

• profile.js, profile.controller.js, and profile.controller.spec.js are stubs generated by cg-angular-fullstack and have no special code. The generator by default sticks all them in the main module so I changed the module for each to 'profile'.

I'm completely out of ideas. If I can't debug this I'll have to assume my whole app design is flawed and restart. :(

Answer 1

Somehow Karma wasn't importing files in the right order, even though it had been for weeks prior. My resolution was three parts:

1. Renamed all module definitions from *.js to *.module.js.
2. Renamed all UI Router work that wasn't in a module definition from *.js to *.state.js.

3. Imported files in this order:

         'node_modules/jquery/dist/jquery.js',
         'node_modules/angular/angular.js',
         'node_modules/angular-mocks/angular-mocks.js',
         'node_modules/angular-ui-router/release/angular-ui-router.js',
         'node_modules/angular-bootstrap/ui-bootstrap.js',
         'node_modules/angular-ui-form-validation/dist/angular-ui-form-validation.js',
         'node_modules/angular-animate/angular-animate.js',
   
         // client files
         'client/app/app.module.js',
         'client/app/app.controller.js',
         'client/app/**/*.service.js',
         'client/app/**/*.directive.js',
         'client/app/**/*.module.js',
         'client/app/**/*.state.js',
         'client/app/**/*.controller.js',
         'client/app/**/*.spec.js'
   

Only then did the tests start working again.