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

Question

I created a public folder to hold my js and css files. 我创建了一个公共文件夹来保存我的js和css文件。 I also had some node_modules that I needed to make accessible so I made that directory public. 我还有一些我需要访问的node_modules，所以我把那个目录公之于众。 Now when I run the app which is located here : https://sleepy-anchorage-14491.herokuapp.com/ , it tells me it can't find app\\main.js . 现在，当我运行位于此处的应用程序： https ： app\\main.js ，它告诉我它无法找到app\\main.js

Here is my index.html: 这是我的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>

Here is my server.js 这是我的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');
});

Here is package.json 这是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": {}
}

Answer 1

Already Late for the answer but still 答案已经迟到但仍然存在
try to update your package.json file 尝试更新您的package.json文件
1. move all devDependencies to dependencies 1.将所有devDependencies移动到依赖项
2. add engines which node and npm verion you have used locally it will tell heroku to install those version on server 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
 }
}

in your app.module.component file inside @NgModule add 在@NgModule add中的app.module.component文件中
**bootstrap: [RootComponent]**
it will tell angular to load root component all other components should be declared inside 它将告诉角度加载根组件所有其他组件应该在里面声明
if you have more than one component in index.html you should add all of them in bootstrap: [RootComponent,comp1,comp2] but it is not good practice. 如果你在index.html中有多个组件，你应该在bootstrap: [RootComponent,comp1,comp2]添加所有组件bootstrap: [RootComponent,comp1,comp2]但这不是一个好习惯。 So add only root to bootstrap and make other component child of root. 因此，只将root添加到bootstrap并使其他组件成为root的子项。
declarations: [ comp1, comp2, comp3, comp4 ] 声明：[comp1，comp2，comp3，comp4]

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

问题描述

1 个解决方案

解决方案1
0 2017-07-17 18:18:39

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

问题描述

1 个解决方案

解决方案1 0 2017-07-17 18:18:39

解决方案1
0 2017-07-17 18:18:39