Angular (with Firebase) app deploy to Firebase problems

Question

I have created one of my first angular apps through the Thinkster IO tutorial and want to deploy the application to Firebase. I've run firebase init and firebase deploy, both of which run successfully.

When opening the application from firebase the page loads but shows nothing. On opening the JS console there are three errors

The errors are:

1) [blocked] The page at 'https://ngfantasyfootball.firebaseapp.com/' was loaded over HTTPS, but ran insecure content from 'http://static.firebase.com/v0/firebase.js': this content should also be loaded over HTTPS.

2) Uncaught ReferenceError: Firebase is not defined angularFire.js:17

3) Uncaught Error: [$injector:unpr] Unknown provider: angularFireAuthProvider <- angularFireAuth angular.js:60

Any ideas on how to solve the first error? The second, Firebase is not defined says its from the angularFire script? The application runs locally without any errors so I am unsure as to why this comes up.

The 3rd error, angularFireAuthProvider. I've seen some questions that had answers about using simpleLogin instead of angularFireAut but am unsure if that is the source of the errors. Any help would would be great, I've been struggling with this for awhile now.

Config.JS

'use strict';
angular.module('fantasyApp.config', [])

app.config(['$routeProvider',


function($routeProvider) {
  $routeProvider
  .when('/',                        { templateUrl: 'views/default.html' })
  .when('/signin',                  { templateUrl: 'views/users/signin.html' })
  .when('/signup',                  { templateUrl: 'views/users/signup.html' })
  .when('/nflteams',                { templateUrl: 'views/nfl/list.html', authRequired: true })
  .when('/nflteams/:nflTeamId',     { templateUrl: 'views/nfl/view.html', authRequired: true })
  .when('/leagues',                 { templateUrl: 'views/leagues/list.html', authRequired: true })
  .when('/leagues/create',          { templateUrl: 'views/leagues/edit.html', authRequired: true })
  .when('/leagues/:leagueId',       { templateUrl: 'views/leagues/view.html', authRequired: true })
  .when('/leagues/:leagueId/edit',  { templateUrl: 'views/leagues/edit.html', authRequired: true })
  .when('/players',                 { templateUrl: 'views/players/list.html', authRequired: true })
  .when('/players/:playerId',       { templateUrl: 'views/players/view.html', authRequired: true })
  .when('/fantasyteams',                      { templateUrl: 'views/fantasyteams/list.html', authRequired: true})
  .when('/fantasyteams/create',               { templateUrl: 'views/fantasyteams/edit.html', authRequired: true})
  .when('/fantasyteams/:fantasyTeamId',       { templateUrl: 'views/fantasyteams/view.html', authRequired: true})
  .when('/fantasyteams/:fantasyTeamId/edit',  { templateUrl: 'views/fantasyteams/edit.html', authRequired: true})
  .otherwise(                       { redirectTo: '/' });
}])



// establish authentication
  .run(['angularFireAuth', 'FBURL', '$rootScope', 
    function(angularFireAuth, FBURL, $rootScope) {
      angularFireAuth.initialize(new Firebase(FBURL), {scope: $rootScope, name: 'auth', path: '/signin'});
      $rootScope.FBURL = FBURL;
    }])


  .constant('FBURL', 'https://ngfantasyfootball.firebaseio.com/')

app.js

'use strict';

// Declare app level module which depends on filters, and services
var app = angular.module('fantasyApp',
 [ 'fantasyApp.config'
, 'fantasyApp.controllers.header'
, 'fantasyApp.controllers.signin'
, 'fantasyApp.controllers.signup'
, 'fantasyApp.controllers.nfl'
, 'fantasyApp.controllers.leagues'
, 'fantasyApp.controllers.players'
, 'fantasyApp.controllers.fantasyTeams'
, 'firebase', 'ui.bootstrap', 'ngRoute']
)

Answer 1

It is likely that the first error you get is causing all the other errors, so let's focus on that on:

[blocked] The page at 'https://ngfantasyfootball.firebaseapp.com/' was loaded over HTTPS, but ran insecure content from 'http://static.firebase.com/v0/firebase.js': this content should also be loaded over HTTPS.

Remember when IE used to ask about "This page contains a mix of secured and non-secured content. Do you want to display the non-secured content?" What you're seeing in the error message above is the modern-day equivalent. Except that the user doesn't get a question anymore, the non-secure parts are simply blocked.

Firebase Hosting servers all static content over HTTPS. Most likely your local dev system doesn't have HTTPS set up, so you're accessing that same content over regular HTTP.

So on your local system when you're loading the Firebase client library, you have a script tag like this in your HTML:

<!-- don't do this -->
<script src="http://static.firebase.com/v0/firebase.js"></script>

Which unfortunately will not work once you deploy the application to Firebase hosting. It will serve your HTML page over HTTPS and then refuse include the JavaScript over HTTP.

So to serve the application from Firebase Hosting, your script tag should look like this:

<!-- don't do this -->
<script src="https://static.firebase.com/v0/firebase.js"></script>

This is normally where you'd get into all kinds of nasty deployment scripts that modify the HTML as you deploy it. Luckily that is not needed for this case, as there is a nice little trick that will make the script tag work in both places. It turns out that you can leave the protocol off the URL and in that case the browser will simply use the same protocol as it used to load the page.

<script src="//static.firebase.com/v0/firebase.js"></script>

By including the script like this, your local dev environment will load it over HTTP, while Firebase Hosting will include it using HTTPS.