AngularJS +節點：部署到Heroku時為空白頁

Question

首先，我要說明我從未構建自己的應用程序並將其部署到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();
                }]
            }
        })

部署方面的任何幫助將不勝感激！

Answer 1

檢查網絡控制台，您有一個/diseases調用，該調用返回500服務器錯誤。 閱讀您的代碼，您應該為此調用提供一些ID。

AngularJS +節點：部署到Heroku時為空白頁

問題描述

1 個解決方案

解決方案1
0 2016-01-25 22:43:02

AngularJS +節點：部署到Heroku時為空白頁

問題描述

1 個解決方案

解決方案1 0 2016-01-25 22:43:02

解決方案1
0 2016-01-25 22:43:02