javascript - 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 未定义 angularFire.js:17

3) Uncaught Error :[$injector:unpr] 未知的提供者:angularFireAuthProvider <- angularFireAuth Angular .js:60

关于如何解决第一个错误有什么想法吗？第二个，Firebase is not Define 说它来自 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 访问相同的内容。

因此，在本地系统上加载 Firebase 客户端库时，您的 HTML 中会有一个如下所示的脚本标记:

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

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

因此，要从 Firebase Hosting 提供应用程序，您的脚本标记应如下所示:

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

这通常是您会遇到各种令人讨厌的部署脚本的地方，这些脚本会在部署时修改 HTML。幸运的是，本例不需要这样做，因为有 nice little tric k 这将使脚本标签在两个地方都起作用。事实证明，您可以将协议(protocol)从 URL 中删除，在这种情况下，浏览器将仅使用与加载页面相同的协议(protocol)。

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

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