Ryan.lay Ryan.lay - 4 months ago 20
AngularJS Question

Angular - Module '{0}' is not available! error due to folder name

Running into a weird issue with loading an Angular module.

I have a file structure like so

-ng-app
-app
-account
accountCtrl.js.coffee
-auth
authCtrl.js.coffee
-other_folders
app.js.coffee


and I'm loading accountCtrl and other controllers like so

#app/app.js.coffee
angular.module("app", [
'ngResource'
'smart-table'
'checklist-model'
'ui.router'
...
])

#app/account/accountCtrl.js.coffee
@app = angular.module('app')
app.controller 'accountCtrl', ($scope, $state) ->
....

#app/auth/authCtrl.js.coffee
@app = angular.module('app')
app.controller 'authCtrl', ($scope, $state) ->
....


But then accountCtrl throws an error


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.


I know the syntax is correct, because I'm loading a a few dozen other controllers with the same syntax. So I started playing around with different scenarios.


  1. I deleted the 'account' folder


    No error thrown, other controllers load normally

  2. I renamed account folder to z-account


    No error thrown, all controllers including accountCtrl load normally



So the error only occurs when the folder is named 'account' and is the first file in the 'app' folder. Any ideas what's going on?

Answer

Rails asset pipeline includes javascript files aphabetically, and app/account.js.coffee was being included before app/app.js.coffee, hence the missing module error.

Two solutions possible:

  1. prefix files with an underscore to ensure it loads first like so:

    _app.js.coffee 
    

Or

  1. Remove

     //= require_tree .
    

in application.js and include files manually.

Comments