Ionic "Can not ready property 'ready' of undefined property

ionic-v1
1

Hey guys,

I’m developing an app where I’m using Firebase as backend. Before I added Firebase to my app, everything was working fine but now, when I try to use the app I get the error:

ionic.bundle.min.js:150 TypeError: Cannot read property 'ready' of undefined
    at new <anonymous> (controllers.js:98)
    at Object.invoke (ionic.bundle.min.js:75)
    at S.instance (ionic.bundle.min.js:122)
    at n (ionic.bundle.min.js:98)
    at g (ionic.bundle.min.js:92)
    at n (ionic.bundle.min.js:99)
    at g (ionic.bundle.min.js:92)
    at ionic.bundle.min.js:91
    at Object.x.appendViewElement (ionic.bundle.min.js:471)
    at Object.render (ionic.bundle.min.js:470)(anonymous function) @ ionic.bundle.min.js:150(anonymous function) @ `ionic.bundle.min.js:123$broadcast @ ionic.bundle.min.js:179x.transition.I.then.x.transition.x.transition @ ionic.bundle.min.js:447(anonymous function) @ ionic.bundle.min.js:162$eval @ ionic.bundle.min.js:176$digest @ ionic.bundle.min.js:174$apply @ ionic.bundle.min.js:177(anonymous function) @ ionic.bundle.min.js:190e @ ionic.bundle.min.js:79(anonymous function) @ ionic.bundle.min.js:82`

My app.js looks like this:

var mapApp = angular.module('mapApp', ['ionic',])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  })
});

mapApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state("home", {
    url: "/",
    templateUrl: "templates/home.html"
  })

  .state("search", {
    url: "/search",
    templateUrl: "templates/search.html"
  })
  .state("map", {
    url: "/map",
    templateUrl: "templates/map.html"
  });

  $urlRouterProvider.otherwise("/");
})

The relevant part of my controller.js looks like this:

//Funktion zur Initialisierung der Map
//inklusive Geocoding und Erreichbarkeitspolygonen
function initialize() {
      //Route360° config
      r360.config.serviceKey = 'xcv';
      r360.config.serviceUrl = 'https://service.route360.net/germany/';

 	  //Karte und Geocoder initialisieren
      var myLatlng = new google.maps.LatLng(48.383, 10.883);
      var mapOptions = {
        center: myLatlng,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      var geocoder = new google.maps.Geocoder();

      //Abrufen des ersten Services um eine synchrone Abfolge von
      //Geocoding -> schreiben in Service -> abrufen aus Service herzustellen
      var p = geocodeAddress(geocoder,map);

      p.then(function() {
      //Route 360° Polygon erzeugen
      var coords = dataService.getLatLng();
      var time = dataService.getTime();
      var move = dataService.getMove();
      var colorPolygonLayer = new GoogleMapsPolygonLayer(map);
      showPolygons(coords[0], coords[1],colorPolygonLayer, time, move);

      //POIs aus Firebase laden und in array data[] speichern
      var data = new Array;
      var query = firebase.database().ref("users").orderByKey();
      query.once("value")
      	.then(function(snapshot) {
      		snapshot.forEach(function(childSnapshot) {
      			var poi = childSnapshot.val();
      			if(poi.stadt == dataService.getStadt()){
      				data.push(poi);
      			}
      		})
      	console.log(data);
       	})
      });

      $scope.map = map;
     }
  initialize.Platform.ready(initialize);
});

And my index.html like this:

<html ng-app="mapApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

    <title>Bachelorarbeit</title>
     <!-- stylesheets -->
    <link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://developers.route360.net/resources/css/r360.css" />

    
    <!--  Include jQuery and jQuery UI -->
    <script src="https://developers.route360.net/vendors/jquery/jquery.min.js"></script>
    <script src="https://developers.route360.net/vendors/jquery-ui/jquery-ui.min.js"></script>

    <!-- ionic/angularjs js -->
    <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>

    <!-- Including Google Maps API -->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- Firebase -->
    <script src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js"></script>
    <script>
      var config = {
       apiKey: "abc",
       authDomain: "abc.firebaseapp.com",
       databaseURL: "https://abc.firebaseio.com/",
       storageBucket: "",
       messagingSenderId: "",
     };
     firebase.initializeApp(config)
    </script>
    
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>

    <!--  Include r360.js -->
    <script src="https://developers.route360.net/vendors/r360/r360-core-src.js"></script>
    <script src="https://developers.route360.net/vendors/r360/r360-google.js"></script>
</head>

I dont know what I did wrong here but I think I did something wrong with the dependencies / includes since it worked before. Removing the firebase include + code does not solve my issue so I appreciate every kind of hint.

Thanks for any help in advance,

Julian

2

Found the problem…

It seems that I accidently changed

ionic.Platform.ready(initialize);

to

initialize.Platform.ready(initialize);

Thanks anyway and best regards,
Julian