I had my angularjs setup locally and everything worked fine until I uploaded my code to an intermediate server. Now I have a problem with dependencies that are not respected, but I don't understand why. I guess he worked locally because he downloaded the library faster. Now I changed my application to try to fix this problem, but I can not get it to work.
My application downloads a one-page application consisting of three types ( main , map and map-data ). I use the AngularJS module structure to run this application. Here is my directory structure:
index.html pretty simple:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> <title>Map Application</title> <link rel="icon" sizes="16x16" href="/favicon.ico" /> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ map_key }}&sensor=false"></script> <script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script> <link rel="stylesheet" href="/css/main.css" media="screen" type="text/css"> <link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.css"> </head> <body> <div id="content" data-ui-view></div> <script> </script> </body> </html>
Then requirejs-config.js :
if (typeof define !== 'function') { // to be able to require file from node var define = require('amdefine')(module); } define({ baseUrl: 'js', // Relative to index paths: { 'jquery': 'bower_components/jquery/dist/jquery.min', 'underscore': 'bower_components/underscore/underscore-min', 'domReady': 'bower_components/requirejs-domready/domReady', 'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser', 'async': 'bower_components/requirejs-plugins/src/async', 'goog': 'bower_components/requirejs-plugins/src/goog', 'angular': 'bower_components/angular/angular', 'ngResource': 'bower_components/angular-resource/angular-resource', 'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router', 'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps', 'moment': 'bower_components/momentjs/moment', 'moment-timezone': 'bower_components/moment-timezone/moment-timezone', 'moment-duration-format': 'bower_components/moment-duration-format/lib/moment-duration-format' }, shim: { 'angular': { exports: 'angular' }, 'ngResource': ['angular'], 'ui.router' : ['angular'] } });
Then main.js :
define([ 'require', 'angular', './app' ], function (require, angular) { 'use strict'; require(['domReady!'], function (document) { angular.bootstrap(document, ['app']); }); });
Then app.js :
define([ 'angular', 'ui.router', './config', './modules/map/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.constants', 'app.map', 'ui.router' ]).config(['$urlRouterProvider', function ($urlRouterProvider) { $urlRouterProvider.otherwise('/'); }]); });
Here you can see that app.js depends on ./modules/map/index , where I download all the available controllers:
define([ './controllers/mainCtrl', './controllers/mapCtrl', './controllers/mapDataCtrl' ], function(){});
Each controller requests the same module, here mapDataCtrl.js , which is started by / :
define(['./../module', 'moment'], function (controllers, moment) { 'use strict'; controllers.controller('MapDataController', ['$scope', 'MapService', function ($scope, MapService) { var now = moment(); $scope.data = {}; $scope.data.last_update = now.valueOf(); $scope.data.time_range = '<time range>'; $scope.data.times = []; var point = $scope.$parent.map.center; MapService.getStatsFromPosition(point.latitude, point.longitude).then(function(data){ $scope.data.times = data; }); }]); });
As you can see, the controller requests module.js , where the states and module name are defined:
define([ 'angular', 'ui.router', '../../config', 'underscore', 'angular-google-maps', './services/MapService' ], function (ng) { 'use strict'; return ng.module('app.map', [ 'app.constants', 'ui.router', 'angular-google-maps' ]).config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { $stateProvider .state('main', { templateUrl: '/js/modules/map/views/main.html', controller: 'MainController' }) .state('main.map', { templateUrl: '/js/modules/map/views/main.map.html', controller: 'MapController', resolve: { presets: ['MapService', function(MapService){ return MapService.getPresets(); }], courses: ['MapService', function(MapService){ return MapService.getCourses() }] } }) .state('main.map.data', { url: '/', templateUrl: '/js/modules/map/views/main.map.data.html', controller: 'MapDataController' }) ;
I have a problem in this file. I am trying to load the angular-google-maps module because I need it in my MapCtr controller and most likely in MapDataCtrl . But I get the following message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module app.map due to: Error: [$injector:modulerr] Failed to instantiate module angular-google-maps due to: Error: [$inj...<omitted>...1)
I have no idea what I'm missing, for me everything looks right. What am I missing?
UPDATE 1
I think because angular-google-map not compatible with AMD, so I changed my requirejs-config.js as follows:
if (typeof define !== 'function') { // to be able to require file from node var define = require('amdefine')(module); } define({ baseUrl: 'js', // Relative to index paths: { ... 'underscore': 'bower_components/underscore/underscore-min', 'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps', ... }, shim: { 'angular': { exports: 'angular' }, 'ngResource': ['angular'], 'ui.router' : ['angular'], 'angular-google-maps': { deps: ["underscore"], exports: 'angular-google-maps' } } });
but i still have the same problem.