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：未定义Firebase angularFire.js：17

3）未捕获错误：[$ injector：unpr]未知提供商：angularFireAuthProvider＆lt; - angularFireAuth angular.js：60

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

第3个错误，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页面提供服务，然后拒绝包含JavaScript over HTTP。

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

<!-- 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加载它，而Firebase Hosting将使用HTTPS包含它。

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

1 个答案: