角度（使用Firebase）应用程序部署到Firebase问题

Question

我已经通过Thinkster IO教程创建了我的第一个角度应用程序之一，并且希望将应用程序部署到Firebase。我运行了firebase init和firebase deploy，两者均成功运行。

从firebase打开应用程序时，页面加载但不显示任何内容。在打开JS控制台有三个误差

的错误是：

1） [阻断该在“https://ngfantasyfootball.firebaseapp.com/”装载在HTTPS上，而是跑到从“http://static.firebase.com/v0/firebase.js”不安全的内容页：这个内容也应该通过HTTPS加载。

2）未捕获的ReferenceError：未定义火力地堡angularFire.js：17

3）未被捕获的错误：[$注射器：unpr]未知提供商：angularFireAuthProvider < - angularFireAuth angular.js：60

关于如何解决第一个错误的任何想法？第二个，Firebase is not defined说它来自angularFire脚本？该应用程序在本地运行没有任何错误，所以我不确定为什么会出现这种情况。

第三个错误，angularFireAuthProvider。我见过一些问题，有关使用simpleLogin而不是angularFireAut的答案，但我不确定这是否是错误的根源。任何帮助都会很好，现在我一直在努力。

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

很可能是你得到的第一个错误是造成所有其他错误，让我们专注于在：

[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.

请记住，当IE用于询问“此页面包含安全和非安全内容的组合”想要显示非安全内容？“您在上面的错误消息中看到的是现代等价物。除了用户不再有问题之外，不安全的部分将被阻止。

Firebase托管服务器通过HTTPS服务器上的所有静态内容。很可能您的本地开发系统没有设置HTTPS，因此您通过常规HTTP访问相同的内容。

因此，当你加载火力地堡客户端库您的本地系统上，你有这样的脚本标签在你的HTML：

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

不幸的是不会，一旦你的工作部署，以火力托管应用程序。它将通过HTTPS为您的HTML页面提供服务，然后拒绝在HTTP上添加JavaScript。

所以服务从火力地堡托管应用程序，脚本标签应该是这样的：

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

这通常是在那里你会进入你部署修改HTML各种讨厌的部署脚本它。幸运的是，这种情况并不需要，因为有一个nice little tric k将使脚本标记在两个地方都起作用。事实证明，您可以将协议离开URL，在这种情况下，浏览器将简单地使用与用于加载页面相同的协议。

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

通过包含这样的脚本，你的本地开发环境将加载它通过HTTP，而火力地堡主机将包括使用它HTTPS。