角度（使用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。