Angular App works great but ngMock NOT loading Modules properly

Question

My app works fine when i deploy it and run it in a browser

I can successfully reach all my controllers/services. and they were linked together via submodules.

I used submodules to organize the states/routes better for ui-router. (Previously we had ALL of our states in the app dot js file. There were like 50. Now they're organized out into smaller modules).

app.js [Module file]

var phpApp = angular.module("phpApp",
[
    "ui-router"
    "phpApp.components" , ...

]).config(...).run(...);

components.js [Module file, contains states/routes]

var ComponentModule = angular.module("phpApp.components",
[
    "ui-router"
    "phpApp.components.user" , 
    "phpApp.components.client"
     ...

]).config(...).run(...);

user.js [Module file, contains states/routes]

var UserModule = angular.module("phpApp.components.user",
[
    "ui-router"

]).config(...).run(...);

user-controller.js // LOADS fine; is a controller.

angular.module('phpApp.components').controller('UserController', ....);

client-controller.js // does NOT load! Cannot find 'phpApp.components' module...

angular.module('phpApp.components').controller('ClientController', ...);

My index.html file loads the scripts in this order:

<script src="app.js"></script>
<script src="components/components-module.js"></script>
<script src="components/user/user-module.js"></script>
<script src="components/client/client-module.js"></script>
...
<script src="components/user/user-controller.js"></script>
<script src="components/client/**client-controller.js**"></script>

I dont get it. My client-controller loads AFTER my user-controller... yet it is not able to locate the proper module?

I get the error:

Uncaught Error: [$injector:nomod] Module 'phpApp.components' 
is not available! You either misspelled the module name or 
forgot to load it.

I am very confused and frustrated at this point. I am not sure where I am going wrong.

Answer 1

The answer lies in the karma config file (karma.conf.js by default)

The answer, as expected, was a simple one.

I had a rule to include all JavaScript files:

"app/app.js",
"app/components/**/*.js",

You will need to make sure you rewrite your load rules to load all module JS files first:

"app/app.js",
"app/components/**/*-module.js", <-- modules must load first
"app/components/**/*.js",

To help expound, i have my project set up where:

1) controllers are in their respective xxx-controller.js files, 
2) ervices are in xxx-service.js files and 
3) modules are in xxx-module.js files