AngularJS + Node：部署到Heroku時的空白頁面

讓我從開始說我從未構建自己的應用程序並將其部署到Heroku。現在，我正在嘗試，我調試了一些問題，但現在看起來好像我的應用程序正在加載沒有任何錯誤（根據控制檯），但我的角度應用程序主頁是完全空白的。AngularJS + Node：部署到Heroku時的空白頁面

在<ui-view></ui-view>標記之外添加一些非角度代碼之後，該純HTML（<h1>Working?</h1>）加載，但不加載角。

<html> 
    <head> 
    <title>EDGE !</title> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
     <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="/bower_components/angular-trello/dist/angular-trello.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> 
    <script src="/javascripts/angularApp.js"></script> 
     <script src="https://api.trello.com/1/client.js?key=87b220f4687be5f86544b866eef24b3e"></script> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.js" type="text/javascript"></script> 

     <link rel="stylesheet" href="/stylesheets/style.css"> 
    </head> 

    <body ng-app="EDGE-Trello"> 
     <h1>Working?</h1> 
     <ui-view></ui-view> 
    </body> 
</html>

有什麼關於我失蹤的部署？當我看到網絡在我的Chrome DevTools，看來好像一切都加載多個項目，當我鍵入heroku logs這說明此錯誤其它：

at=error code=H12 desc="Request timeout" method=GET path="/diseases" host=edge-trello.herokuapp.com request_id=4b16315c-b87e-4ef7-b412-5345881df031 fwd="172.85.41.122" dyno=web.1 connect=0ms service=30008ms status=503 bytes=0

...這個資產有沒有問題裝載本地和我不不知道爲什麼現在有問題。

，這裏是我的路線導致了問題：

var mongoose = require('mongoose'); 
var express = require('express'); 
var router = express.Router(); 
var Disease = mongoose.model('Disease'); 

router.post('/diseases', function(req, res, next) { 
    var disease = new Disease(req.body); 

    disease.save(function(err, diseases){ 
    if(err){ return next(err); } 

    res.json(diseases); 
    }); 
});

...和我disease廠：

app.factory('diseases', [ 
    '$http', 
    function($http){ 

     var o = { 
      diseases: [] 
     }; 

     o.show = function(disease) { 
      return $http.get('/diseases/', {id : disease._id}) 
       .success(function(data) { 
        console.log(disease.name); 
      }); 
     }; 

     o.create = function(diseases) { 
      return $http.post('/diseases', diseases).success(function(data){ 
       o.diseases.push(data); 
       console.log(data); 
      }); 
     }; 

     o.getAll = function() { 
      return $http.get('/diseases').success(function(data){ 
       angular.copy(data, o.diseases); 
//    console.log(data); 
      }); 
     }; 

     o.destroy = function(disease) { 
      return $http.delete('diseases/' + disease._id).success(function(data){ 
       console.log("Disease " + disease.name + " has been removed!"); 
       o.getAll(); 
      }); 
     }; 

     return o; 
    } 
]);

..和我的配置功能：

app.config([ 
    'TrelloApiProvider', 
    '$stateProvider', 
    '$urlRouterProvider', 
    function(TrelloApiProvider, $stateProvider, $urlRouterProvider) { 

    $stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: '/javascripts/home/_home.html', 
      controller: 'MainCtrl', 
      resolve: { 
       diseasePromise: ['diseases', function(diseases){ 
        return diseases.getAll(); 
       }] 
      } 
     })

任何幫助在部署中將不勝感激！

來源

2016-01-25 Jeremy Thomas

難道你的Angluar路由有問題嗎？也許在這裏張貼路線？ – officert

我會編輯路線 –

你有沒有設置環境變量？ – YOU

檢查您的網絡控制檯，您有一個致電/diseases，它返回一個500服務器錯誤。讀取你的代碼，你應該爲這個調用提供一些id。

來源

2016-01-25 22:43:02 topheman

我將它添加到問題 –

它說「未決」的疾病狀態，然後切換到「503錯誤」 –

AngularJS + Node：部署到Heroku時的空白頁面

回答

相關問題