Menu
I'm trying to load a blank google maps app in my rails app (I will be adding markers later via facotries, etc). This format worked in my last project, but unfortunately I can't get it to load this time around.
I used Bower via bower install angular, but it seems I'm setting an error Error: [ng:areq] Argument 'MapController' is not a function, got undefined from the browser with a red line where the map should be. It made sure all the namespaces matched but its still coming up short.
What is also strange is this ng:areq error is coming from a public assets file, not the files below (file application-1f030c1aa52b19b22da2952dccdcd4ba.js:6)
ERRORS
Console errors:
var injector = angular.injector(['Sessions_Map', 'ng']); returns undefined
MapController returns MapController is not defined
Error: [ng:areq] Argument 'MapController' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=MapController&p1=not%20a%20function%2C%20got%20undefined
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at Mt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at _t (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at x (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at vt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42(anonymous function) @ application-dc67be4c50a7a0828f3e243f50780c24.js:42
application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require map_app.js
map_app.js
var Sessions_Map = angular.module('Sessions_Map' , []);
Sessions_Map.controller('MapController', function($scope){
});
Sessions_Map.directive("myMaps", function() {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
link: function (scope, element, attrs) {
var mapOptions = {
center: new google.maps.LatLng(34.029732, -118.449528),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
}
};
});
Map.html.erb
<!doctype html>
<html ng-app="Sessions_Map">
<head>
<%= javascript_include_tag "map_app.js", "data-turbolinks-track" => true %>
<title>
Google Maps
</title>
<style>
#map-canvas{
height:650px;
width:1050px;
border:2px solid red;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcRGSjkX4Meav-RxEzY4SXQnVwKnedZvE">
</script>
<script type="text/javascript"></script>
</head>
<body ng-controller="MapController">
<my-maps id="map-canvas"></my-maps>
</body>
</html>
842
application-dc67be4c50a7a0828f3e243f50780c24.js
What exactly is your build process / asset pipeline?
Did you configure your asset paths properly?
config.assets.paths << Rails.root.join("...stuff...")
note you are creating a new module (passing an empty requires array)
var Sessions_Map = angular.module('Sessions_Map' , []); // create
which you are later creating a second time rather than retrieving it.
var Sessions_Map = angular.module('Sessions_Map'); // retrieve
I think those 2 blocks should not be there...
<script type="text/javascript"
src="/app/assets/javascripts/angular-animate.min.js.map">
</script>
<script type="text/javascript"
src = "/app/assets/javascripts/app/map_app.js">
</script>
since you already have:
<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>
which itself has the following requires:
//= require angular-animate
//= require app/map_app
From this trace, where functions are named Mt, _t, v and g I can see there is minification going on.
Error: [ng:areq] Argument 'MapController' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=MapController&p1=not%20a%20function%2C%20got%20undefined
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at Mt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at _t (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at x (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at vt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42(anonymous function) @ application-dc67be4c50a7a0828f3e243f50780c24.js:42
please make sure to use the correct syntax for the dependency injection to work properly.
https://docs.angularjs.org/tutorial/step_05 -> "A Note on Minification"
EDIT: You can tweak the uglifier step in your rails config to look at the result application-[checksum].js, and actually see that your controller is in there.
WARNING: Tried to load angular more than once.
It is possible that somewhere in your code you are loading angular twice, and possibly messing up the previous module declaration.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
