Question

我尝试按照本教程将angularJs应用部署到heroku：http://www.sitepoint.com/deploying-yeomanangular-app-heroku/

我已经能够将我的应用程序上传到heroku但不幸的是它似乎并没有加载我的任何脚本。

https://data-display-prototype.herokuapp.com/

在检查页面时，我收到了一堆404错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

在本地运行应用程序正常。不幸的是，我不知道在哪里寻找解决方案。

更新：

这些是页面中的所有错误（我认为是index.html中的所有脚本）

Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angular-chart.js/dist/angular-chart.css 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/jquery/dist/jquery.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/Chart.js/Chart.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/app.js    
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/main.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/firebase-test.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/chart-test.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/firebase/firebase.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/services/data-services.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/sidebar.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angularfire/dist/angularfire.min.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angular-chart.js/dist/angular-chart.js 
Failed to load resource: the server responded with a status of 404 (Not Found) angular.min.js:36 
Uncaught Error: [$injector:modulerr]               http://errors.angularjs.org/1.4.0-beta.2/$injector/modulerr?p0=DataDisplayP…s.com%2Fajax%2Flibs%2Fangularjs%2F1.4.0-beta.2%2Fangular.min.js%3A17%3A350)
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angular-chart.js/dist/angular-chart.css 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/styles/main.css     
Failed to load resource: the server responded with a status of 404 (Not Found)

更新2：

package.json文件：

{
  "name": "datadisplayprototype",
  "version": "0.0.0",
  "dependencies": {
    "express": "~4.12.3",
    "gzippo": "~0.2.0",
    "morgan": "~1.5.2"
  },
  "repository": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^2.0.0",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-compass": "^1.0.0",
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-cssmin": "^0.12.0",
    "grunt-contrib-htmlmin": "^0.4.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^2.1.2",
    "grunt-google-cdn": "^0.4.3",
    "grunt-newer": "^1.1.0",
    "grunt-ng-annotate": "^0.9.2",
    "grunt-svgmin": "^2.0.0",
    "grunt-usemin": "^3.0.0",
    "grunt-wiredep": "^2.0.0",
    "jshint-stylish": "^1.0.0",
    "load-grunt-tasks": "^3.1.0",
    "time-grunt": "^1.0.0",
    "grunt-karma": "~0.10.1",
    "karma-phantomjs-launcher": "~0.1.4",
    "jasmine-core": "~2.2.0",
    "karma": "~0.12.31",
    "karma-jasmine": "~0.3.5"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

更新3：已解决！

问题结果是我删除了我的index.html文件中grunt用来生成脚本文件的注释。作为一个菜鸟，我并不怀疑评论实际上可以有一个功能，只是不假思索地删除它们。显然Heroku知道从dist文件夹部署应用程序。由于dist文件夹是在没有任何脚本的情况下生成的，因此我得到了错误。

Answer 1

将它添加到package.json的底部应修复您的bower问题：如果你检查安装日志，你应该看到它甚至可能都没有运行凉亭。我不相信heroku会检查.bowerrc。

"scripts": {
    "postinstall": "bower install"
  }

postinstall告诉npm运行其他脚本或命令。因为heroku在找到package.json时会运行npm install，而不是bower安装，这样我们就可以在npm完成后让bower进行操作。

我有另一个问题，我相信：

app.use(gzippo.staticGzip("" + __dirname + "/dist"));

这是将您的网站设置为引用/dist目录，而该目录不是您的应用所在的目录。或者，如果您确实希望它指向/dist目录，请尝试将../app/附加到html文件中的所有脚本引用。

将角度部署到heroku

1 个答案: