app/main.js 部署到heroku时抛出404？答案

【问题标题】：app/main.js throwing 404 when deployed to heroku?app/main.js 部署到heroku时抛出404？
【发布时间】：2017-07-18 02:18:39
【问题描述】：

我创建了一个公用文件夹来保存我的 js 和 css 文件。我还有一些 node_modules 我需要使其可访问，因此我将该目录公开。现在，当我运行位于此处的应用程序时：https://sleepy-anchorage-14491.herokuapp.com/，它告诉我找不到app\main.js。

这是我的 index.html：

    <!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css">
    <link rel="stylesheet" href="/css/styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="/core-js/client/shim.min.js"></script>

    <script src="/zone.js/dist/zone.js"></script>
    <script src="/systemjs/dist/system.src.js"></script>

    <script src="/js/systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <base href="/">
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

这是我的 server.js

var express = require('express');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'node_modules')));


var server = require('http').createServer(app);


server.listen(process.env.PORT || 3000);

// When the root director is requested, return the index.html page.
app.get('/',function(req,res){
    res.sendFile(__dirname + '/index.html');
});

这里是 package.json

{
  "name": "angulardemo",
  "version": "1.0.0",
  "description": "angulardemo",
  "main": "server.js",
  "scripts": {
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "core-js": "^2.4.1",
    "ejs": "^2.5.5",
    "express": "^4.14.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.0.10",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "^2.5.36"
  },
  "repository": {}
}

【问题讨论】：

标签： node.js angular heroku

【解决方案1】：

答案已经晚了，但仍然
尝试更新您的 package.json 文件
1. 将所有 devDependencies 移至依赖项
2. 添加你在本地使用的节点和npm版本的引擎，它会告诉heroku在服务器上安装这些版本

{ 
 "name": "angulardemo",
 "version": "1.0.0",
 "description": 
 "angulardemo",
 "main": "server.js",
 "scripts": {
 "start": "node app.js",
 "postinstall": "ng build --prod",
 "build": "ng build"
 },
 "keywords": [],
 "author": "",
 "license": "MIT",
 "dependencies": {
 "@angular/common": "~2.4.0",
 "@angular/compiler": "~2.4.0",
 "@angular/core": "~2.4.0",
 "@angular/forms": "~2.4.0",
 "@angular/http": "~2.4.0",
 "@angular/platform-browser": "~2.4.0",
 "@angular/platform-browser-dynamic": "~2.4.0",
 "@angular/router": "~3.4.0",
 "angular-in-memory-web-api": "~0.2.4",
 "core-js": "^2.4.1",
 "ejs": "^2.5.5",
 "express": "^4.14.1",
 "rxjs": "5.0.1",
 "systemjs": "0.19.40",
 "zone.js": "^0.7.4",
 "concurrently": "^3.1.0",
 "lite-server": "^2.2.2",
 "typescript": "~2.0.10",
 "canonical-path": "0.0.2",
 "http-server": "^0.9.0",
 "tslint": "^3.15.1",
 "lodash": "^4.16.4",
 "jasmine-core": "~2.4.1",
 "karma": "^1.3.0",
 "karma-chrome-launcher": "^2.0.0",
 "karma-cli": "^1.0.1",
 "karma-jasmine": "^1.0.2",
 "karma-jasmine-html-reporter": "^0.2.2",
 "protractor": "~4.0.14",
 "rimraf": "^2.5.4",
 "@types/node": "^6.0.46",
 "@types/jasmine": "^2.5.36"
 },
 "devDependencies": {
 },
 "engines": {
 "node": "6.11.1", --> write your npm version to tell heroku which version to install there (command: node -v) 
 "npm": "3.10.10" --> command: npm -v
 }
}

在 @NgModule 内的 app.module.component 文件中添加
**bootstrap: [RootComponent]**
它会告诉 Angular 加载根组件，所有其他组件都应该在里面声明
如果您在 index.html 中有多个组件，则应将它们全部添加到 bootstrap: [RootComponent,comp1,comp2] 中，但这不是一个好习惯。因此，仅将 root 添加到 bootstrap 并使其他组件成为 root 的子组件。

声明：[ 补偿1，补偿2，补偿3， comp4 ]

【讨论】：