Unable to load an angularjs module in coffeescript

Question

I try to make an AngularJS application entierly in CoffeeScript but when my main module is loading, I've got this error :

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] 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.

My app is very simple :

Here's my index.html :

<html ng-app="app">
<head>
<script type="text/javascript" src="javascripts/angular.js"></script>
<script type="text/javascript" src="javascripts/angular-route.js"></script>
<script type="text/javascript" src="javascripts/coffee-script.js"></script>
<script type="text/coffeescript" src="coffee/app.coffee"></script>
</head>
<body></body>
</html>

And my app (app.coffee) is just :

angular.module 'app', []

I don't understand why my 'app' module is not available because if I replace app.coffee by its compiled version (app.js), it work.

Why? What is the problem?

Stefan · Accepted Answer · 2013-11-17 23:08:53Z

2

The app.coffee file gets compiled after angular tries to bootstrap the page. What you could do to make this work is to manually bootstrap the ng-app.

In your app.coffee:

angular.element(document).ready ->
  angular.module 'app', []
  angular.bootstrap document, ['app']

and get rid of the ng-app directive on the html tag. For more info check Angular Bootstrap.

Me for myself would not seriously consider this setup in a productive app. I'd rather compile the coffee script server side...

answered Nov 17, 2013 at 23:08

Stefan

14.9k4 gold badges59 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

neolitec Over a year ago

Thanks for this response! I've just found AngularFun project (github.com/CaryLandholt/AngularFun) that is a great starting point. We can find a "bootstrap.coffee inside ;)

neolitec Over a year ago

Of course it's just a development configuration! But I decided to dig in this question. What is the most easy/fast in development stage? Serve the coffeescripts and let the browser compile them or compile the coffeescripts before serving them?

Stefan Over a year ago

I'd compile them when building the package. So you can just serve js files. Have a look at yeoman.io and generator-angular for a robust and rapid dev workflow.

Collectives™ on Stack Overflow

Unable to load an angularjs module in coffeescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related