Question

在Heroku上部署我的Angular应用程序时，我只收到“未找到”信息，并在控制台中收到其他信息（“无法加载资源：服务器响应状态为404”）。

这是我收到的整个Heroku构建日志：

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  8.11.2
       engines.npm (package.json):   6.1.0

       Resolving node version 8.11.2...
       Downloading and installing node 8.11.2...
       Bootstrapping npm 6.1.0 (replacing 5.6.0)...
       npm 6.1.0 installed
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > aplikacja@0.0.0 postinstall /tmp/build_d1dd43479bc7dcb9ae65082b720aff2b
       > ng build --aot=prod

      31% building modules 181/189 modules 8 active …ules/rxjs/_esm5/inter       Date: 2018-06-08T23:55:35.459Z
       Hash: a1abfaf18b529ef61e77
       Time: 12592ms
       chunk {main} main.js, main.js.map (main) 27.8 kB [initial] [rendered]
       chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
       chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
       chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
       chunk {vendor} vendor.js, vendor.js.map (vendor) 3.5 MB [initial] [rendered]
       audited 22409 packages in 27.121s
       found 7 vulnerabilities (1 low, 5 moderate, 1 high)
       run `npm audit fix` to fix them, or `npm audit` for details
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 844 packages and audited 9173 packages in 12.907s
       found 0 vulnerabilities

-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 48.4M
-----> Launching...
       Released v7
       https://aplikacja-angular.herokuapp.com/ deployed to Heroku

我在package.json中对Heroku进行了部署所需的所有更改，它看起来像这样：

{
  "name": "aplikacja",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cli": "~6.0.8",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "typescript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  },
  "engines": {
    "node": "8.11.2",
    "npm": "6.1.0"
  }
}

我也试过设置“postinstall”：“ng build --aot -prod”但它也没有用。

这是我的server.js代码：

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


app.use(express.static(__dirname + '/dist'));

app.get('/*', function(req,res) {
    res.sendFile(path.join(__dirname+'/dist/index.html'));
});

app.listen(process.env.PORT || 8080);

我很困惑如何解决这个问题。提前谢谢。

Answer 1

如果您的应用程序是由@angular/cli版本6.x.x生成的，那么您的构建可能不仅仅在dist文件夹中。如果您在outputPath中查找angular.json字段，则可能会显示dist/aplikacja。考虑到这一点，您可能希望将server.js更新为...

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


app.use(express.static(__dirname + '/dist/aplikacja'));

app.get('/*', function(req,res) {
    res.sendFile(path.join(__dirname+'/dist/aplikacja/index.html'));
});

app.listen(process.env.PORT || 8080);

Heroku上的Angular应用程序部署问题

1 个答案: