AngularJS cannot find module with latest RequireJS

Question

I just upgraded to RequireJS 2.1.1 - I have an AngularJS app I'm loading with it. I get "No module: app" from angular before the main define runs.

It works fine on RequireJS 2.0.1. Any idea what might have changed?

Here's is public/index.html

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <title>AngularJS</title>
  <link rel="stylesheet" href="css/style.css"/>
  <script data-main="main" src="requirejs/require.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

And here is public/main.coffee

require.config

  shim:
    underscore: exports: '_'
    ngResource:
      exports: 'angular'
      deps: ['angular']
    angular:
      exports: 'angular'
      deps: ['jquery']
    jquery: exports: 'jQuery'

  paths:
    underscore: 'underscore/index'
    angular: 'AngularJS/angular'
    ngResource: 'angular-modules/resource'
    jquery: 'jquery/jquery'

# Bootstrap angularjs using requirejs. 
define [], (require) ->
  angular = require 'angular'
  ngResource = require 'ngResource'

  TestCtrl = require 'controllers/TestCtrl'

  ## ROUTER ###########
  app = angular.module 'app', ['ngResource'], ($routeProvider) ->
    $routeProvider.when '/test', {templateUrl: 'partials/test.html', controller: TestCtrl}
    $routeProvider.otherwise {redirectTo: '/test'}

  return app

Guillaume86 · Accepted Answer · 2012-10-23 17:03:06Z

22

You should manually bootstrap angular and remove the ng-app attribute in that case since the module is not available on dom ready:

angular.bootstrap document, ['app']

at the end of your define function

edited Oct 23, 2012 at 17:03

answered Oct 23, 2012 at 15:46

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

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

5 Comments

Sean Clark Hess Over a year ago

Interesting. It still throws the no module error, but then the app loads afterwards. Still seems weird. Do you know what changed between 2.0 and 2.1?

Sean Clark Hess Over a year ago

If I also remove the ng-app declaration on the html tag it works with no error

Sean Clark Hess Over a year ago

I still don't understand why I need to do that though. Shouldn't I be able to get it working without calling bootstrap?

Guillaume86 Over a year ago

Because the auto bootstrap requires your angular modules to be ready on DOM ready, and RequireJS can't guarantee that

magicgregz Over a year ago

thx! just lost half a day to understand why i had those error messages because i had ng-app in my DOM!

mikeborgh · Accepted Answer · 2013-02-10 03:24:21Z

-1

You need to add this js file: angular-resource.js

answered Feb 10, 2013 at 3:24

mikeborgh

1,19211 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS cannot find module with latest RequireJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related