I have looked at the following questions and have not been able to find an effective solution, hence I am posting another question.
Ionic + firebase, error Module 'firebase' is not available
Firebase, AngularFire Error: Module firebase is not available
Angularfire 'Firebase' is not defined
I am very much a beginner and this is my first Ionic app using Firebase. I am simply trying to get Firebase to load properly. I have included the following CDNs in my index.html:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!--firebase-->
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<!--angularfire-->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js:
angular.module('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginCtrl'
}
}
})
.state('tab.new', {
url: '/new',
views: {
'tab-new': {
templateUrl: 'templates/tab-new.html',
controller: 'NewCtrl'
}
}
})
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'ProfileCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
});
controller.js:
angular.module('starter.controllers', ['ionic', 'firebase', 'starter.services'])
.controller('LoginCtrl', function($scope) {
})
.controller('NewCtrl', function($scope) {})
.controller('HomeCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
})
.controller('ProfileCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
With this code, I get the errors:
Uncaught ReferenceError: angular is not defined(anonymous function) @ angularfire.min.js:12(anonymous function) @ angularfire.min.js:12
ionic.bundle.js:8762 Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.13/$injector/nomod?p0=firebase
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10466:17
at ensure (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10390:38)
at module (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10464:14)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:12796:22
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12780:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:12797:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12780:5)
http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=firebase&p1=Error%…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A12780%3A5)
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:12819:15
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12780:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:12797:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12780:5)
at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12706:11)
at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10144:20)
at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10165:12)
http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=starter&p1=Error%3…3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A10165%3A12)
I did not include the angular CDN because ionic includes it. I already created a new app on firebase, and can access it through the firebase dashboard.
Any ideas how to get firebase up and running correctly?
