AngularJS +节点：部署到Heroku时为空白页

Question

Let me start by stating I have never built my own app and deployed it to Heroku. 首先，我要说明我从未构建自己的应用程序并将其部署到Heroku。 Now that I am trying, I have debugged my way through some issues, but now it seems as though my app is loading without any errors (according to the console), but my angular app homepage is completely blank. 现在，我已经调试了一些问题，但是现在看来我的应用程序正在加载，没有任何错误（根据控制台），但是我的角度应用程序主页完全空白。

After adding some non-angular code outside of the <ui-view></ui-view> tags, that plain HTML ( <h1>Working?</h1> ) loads, but not the angular. 在<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>

Is there something about deployment that I am missing? 我缺少有关部署的信息吗？ When I look at Network in my Chrome DevTools, it appears as though everything is loading other than one item which shows this error when I type heroku logs : 当我在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

...this asset has no problem loading locally and I don't know why there is a problem now. ...此资产在本地加载没有问题，我也不知道为什么现在有问题。

Here is my route causing the issue: 这是引起问题的路线：

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);
  });
});

...and my disease factory: ...以及我的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;
    }
]);

..and my config function: ..和我的配置功能：

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();
                }]
            }
        })

Any help in deployment would be greatly appreciated! 部署方面的任何帮助将不胜感激！

Answer 1

Check your network console, you have a call to /diseases which returns a 500 server error. 检查网络控制台，您有一个/diseases调用，该调用返回500服务器错误。 Reading your code, you should provide some id to this call. 阅读您的代码，您应该为此调用提供一些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