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

Question

我通过 Thinkster IO 教程创建了我的第一个 Angular 应用程序，并希望将应用程序部署到 Firebase。我跑了firebase init和firebase deploy，都运行成功了。

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

错误是：

1) [阻止] 'https://ngfantasyfootball.firebaseapp.com/' 处的页面是通过 HTTPS 加载的，但运行来自 'http://static.firebase.com/v0/firebase.js' 的不安全内容：此内容也应通过 HTTPS 加载。

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

3) 未捕获错误：[$injector:unpr] 未知提供者：angularFireAuthProvider

关于如何解决第一个错误的任何想法？第二个，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

您遇到的第一个错误很可能会导致所有其他错误，所以让我们关注：

[阻止] 'https://ngfantasyfootball.firebaseapp.com/' 的页面通过 HTTPS 加载，但运行来自 'http://static.firebase.com/v0/firebase.js' 的不安全内容：这个内容也应该通过 HTTPS 加载。

还记得 IE 曾经询问“此页面包含安全和非安全内容的混合。您要显示非安全内容吗？”您在上面的错误消息中看到的是现代等价物。除了用户不再收到问题外，不安全的部分被简单地屏蔽了。

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

因此，在您的本地系统上，当您加载 Firebase 客户端库时，您的 HTML 中有一个类似这样的脚本标记：

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

不幸的是，一旦您将应用程序部署到 Firebase 托管，这将无法正常工作。它将通过 HTTPS 为您的 HTML 页面提供服务，然后拒绝通过 HTTP 包含 JavaScript。

因此，要从 Firebase 托管服务应用程序，您的脚本标记应如下所示：

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

这通常是您遇到各种讨厌的部署脚本的地方，这些脚本会在您部署 HTML 时对其进行修改。幸运的是，这种情况不需要这样做，因为有一个 nice little trick 可以使脚本标签在这两个地方都起作用。事实证明，您可以将协议从 URL 中移除，在这种情况下，浏览器将简单地使用与加载页面时相同的协议。

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

通过包含这样的脚本，您的本地开发环境将通过 HTTP 加载它，而 Firebase 托管将使用 HTTPS 包含它。