Using angularJS with requireJS - cannot read property 'module' of undefined

angular-routing, angularjs, javascript, requirejs

Solution

Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' `define` so you need a shim for it. Add this to your `shim` configuration:

angular: {
    exports: "angular"
}

By the way, the `priority` field in your configuration is obsolete. Either you use RequireJS 2.x which ignores this field because `priority` is supported only by RequireJS 1.x. Or you use RequireJS 1.x which would honor `priority` but would ignore the `shim` field because `shim` was introduced in 2.x. My suggestion: use RequireJS 2.x and remove `priority`.

Problem

I had started writing an app using angularJS. After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules. Yes, I know, it was stupid. But it is what it is. So I've tried to convert my code to suit requireJS now. This is my main.js ``` requirejs.config({ baseUrl: "js", paths: { jquery:'jquery-1.7.min', angular: 'angular', angularRoute:'angular-route', mainApp:'AngularApp/app' }, priority:['angular'], shim:{ angularRoute:{ deps:["angular"] }, mainApp:{ deps:['angularRoute'] } }}); require(['angular','angularRoute', 'mainApp'], function(angular, angularRoute, app) { angular.bootstrap(document, ['ServiceContractModule']); }); ``` This is my app.js ``` define(['angular', 'angularRoute', 'AngularApp/services', 'AngularApp/directives', 'AngularApp/controllers'], function(angular, angularRoute, services, directives, controllers) { console.log("sup"); var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]); serviceContractModule.config(function($routeProvider,$locationProvider) { $routeProvider.when('/contractNumber/:contractNumbers', { controller : 'ContractController', templateUrl : './contractSearchResult', reloadOnSearch : true }).when('/serialNumber/:serialNumbers', { controller : 'SerialController', templateUrl : './serialSearchResult' }).when('/QuoteManager',{ controller : 'QuoteManagerController', templateUrl: './quoteManagerView' }).when('/QuoteManagerHome',{ controller : 'QuoteManagerController', templateUrl: './quoteManagerHome' }); }); return serviceContractModule; }); ``` This is my directives.js file ``` define(['angular', 'AngularApp/Directives/tableOperations', 'AngularApp/Directives/line', 'AngularApp/Directives/listOfValues'], function( angular, tableOperations, line, listOfValues) { var directiveModule = angular.module('ServiceContractModule.directives'); directiveModule.directive('tableoperations', tableOperations); directiveModule.directive('line', line); directiveModule.directive('listOfValues', listOfValues); return directiveModule; } ``` ) And this is my services.js file ``` define(['angular', 'AngularApp/Services/quoteManagerSearch'], function(angular, quoteManagerSearch) { var serviceModule = angular.module('ServiceContractModule.services'); serviceModule.factory('searchRequestHandler', quoteManagerSearch); return serviceModule; } ``` ) When I run my page, the current error I am getting is Uncaught TypeError: Cannot read property 'module' of undefined directives.js:14 Uncaught TypeError: Cannot read property 'module' of undefined services.js:5 This seems to be happening on this particular line ``` var directiveModule = angular.module('ServiceContractModule.directives'); ``` I think for some reason, the angular file is not getting loaded. Although when I run the page, I can see all the js files being loaded in the correct order in chrome. Any ideas guys? Need quick help! Thanks!

Original source