在 heroku 中部署 Angular 應用程序時出現問題

Question

我正在嘗試在 Heroku 平台中部署 Angular 項目，項目已部署，但我試圖訪問它在屏幕上顯示一個空白頁面，當我打開日志時，我遇到了一個奇怪的錯誤，例如“未捕獲的語法錯誤：意外的令牌”< ' "這是我的 package.json 文件。

{
  "name": "my-first-app",
  "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-devkit/build-angular": "~0.900.0",
         "@angular/animations": "^9.0.0",
         "@angular/common": "^9.0.0",
         "@angular/compiler": "^9.0.0",
         "@angular/compiler-cli": "^9.0.0",
         "@angular/core": "^9.0.0",
         "@angular/forms": "^9.0.0",
         "@angular/platform-browser": "^9.0.0",
         "@angular/platform-browser-dynamic": "^9.0.0",
         "@angular/router": "^9.0.0",
         "bootstrap": "3.3.7",
         "core-js": "^3.1.2",
         "express": "^4.17.1",
         "rxjs": "^6.0.0",
         "rxjs-compat": "^6.0.0",
         "tslib": "^1.9.0",
         "typescript": "3.7.5",
         "zone.js": "~0.10.2"
        },
      "devDependencies": {
        "@angular/cli": "^9.0.0",
        "@angular/language-service": "^9.0.0",
        "@types/jasmine": "~3.3.12",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~12.0.2",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "~5.4.0",
        "ts-node": "~8.6.2",
        "tslint": "~5.11.0"
        },
       "engines": {
        "node": "~10.16.2",
        "npm": "~6.9.0"
        }
       }

這是我的 server.js 文件

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

app.use(express.static(__dirname + '/dist/my-first-app'));
app.listen(process.env.PORT || 8080);

//PATH LOCATION STARTEGY

app.get('/*', function(req,res){
const fullPath = path.join(__dirname + '/dist/my-first-app/index.html');
console.log(" Fetching from.." + fullPath);
res.sendFile(fullPath);
})

console.log('Server started running..');

//Changed to run on Heroku

這些是我的日志

2020-07-13T07:41:55.728190+00:00 heroku[web.1]: Restarting
2020-07-13T07:41:55.742858+00:00 heroku[web.1]: State changed from up to 
starting
2020-07-13T07:41:57.126267+00:00 heroku[web.1]: Stopping all processes with 
SIGTERM
2020-07-13T07:41:57.251614+00:00 heroku[web.1]: Process exited with status 
143
2020-07-13T07:42:10.403749+00:00 heroku[web.1]: Starting process with command 
`node src/server.js`
2020-07-13T07:42:11.000000+00:00 app[api]: Build succeeded
2020-07-13T07:42:13.232307+00:00 heroku[web.1]: State changed from starting 
to up
2020-07-13T07:42:27.334210+00:00 heroku[router]: at=info method=GET path="/" 
host=front-end-1997.herokuapp.com request_id=f54d5597-039b-4b46-804f- 
a3bb6a77657b fwd="117.204.45.220" dyno=web.1 connect=1ms service=51ms 
status=200 bytes=837 protocol=https
2020-07-13T07:42:27.699671+00:00 heroku[router]: at=info method=GET 
path="/runtime.js" host=front-end-1997.herokuapp.com request_id=f59beb68- 
90e6-4338-a4d4-c14aa41d864c fwd="117.204.45.220" dyno=web.1 connect=1ms 
service=7ms status=200 bytes=837 protocol=https
2020-07-13T07:42:27.721789+00:00 heroku[router]: at=info method=GET 
path="/polyfills.js" host=front-end-1997.herokuapp.com request_id=2b43c7f3- 
6e2e-4f4b-9ba0-539ed5aef376 fwd="117.204.45.220" dyno=web.1 connect=1ms 
service=12ms status=200 bytes=837 protocol=https
2020-07-13T07:42:27.777803+00:00 heroku[router]: at=info method=GET 
path="/styles.js" host=front-end-1997.herokuapp.com request_id=ecb723ff-90fe- 
4327-a74f-7f8facab7302 fwd="117.204.45.220" dyno=web.1 connect=0ms 
service=15ms status=200 bytes=837 protocol=https
2020-07-13T07:42:28.000884+00:00 heroku[router]: at=info method=GET 
path="/vendor.js" host=front-end-1997.herokuapp.com request_id=8360d36e-001e- 
4565-ae9d-76c79fa2b184 fwd="117.204.45.220" dyno=web.1 connect=3ms 
service=3ms status=200 bytes=837 protocol=https
2020-07-13T07:42:28.029924+00:00 heroku[router]: at=info method=GET 
 path="/main.js" host=front-end-1997.herokuapp.com request_id=e44fe6e5-34cf- 
 4ebd-b6a3-c5b0bb041d7f fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=6ms status=200 bytes=837 protocol=https
 2020-07-13T07:42:29.084703+00:00 heroku[router]: at=info method=GET 
 path="/favicon.ico" host=front-end-1997.herokuapp.com request_id=4b4af06a- 
 1dbd-414d-9cea-4f19b9102ac4 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=5ms status=200 bytes=837 protocol=https
 2020-07-13T07:43:00.491794+00:00 heroku[router]: at=info method=GET 
 path="/polyfills.js" host=front-end-1997.herokuapp.com request_id=a16237df- 
 4633-4ae3-8753-b3f40df7b3e5 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=5ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.860971+00:00 heroku[router]: at=info method=GET 
 path="/runtime.js" host=front-end-1997.herokuapp.com request_id=18bf5482- 
 7008-453c-8f39-f08e675c7087 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=2ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.862372+00:00 heroku[router]: at=info method=GET 
 path="/polyfills.js" host=front-end-1997.herokuapp.com request_id=a29b201e- 
 9ab9-41eb-97e6-ca483ff0e809 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=2ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.929580+00:00 heroku[router]: at=info method=GET 
 path="/styles.js" host=front-end-1997.herokuapp.com request_id=25739757- 
 58f9-401e-84dc-0a812045dbef fwd="117.204.45.220" dyno=web.1 connect=0ms 
 service=1ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.956228+00:00 heroku[router]: at=info method=GET 
 path="/main.js" host=front-end-1997.herokuapp.com request_id=1feedb1e-c8d3- 
 42f5-abb4-083468c1e67b fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=2ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.965244+00:00 heroku[router]: at=info method=GET 
 path="/vendor.js" host=front-end-1997.herokuapp.com request_id=30c1c0c6- 
 a33f-4d58-b15b-c723b5a3b8a8 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=5ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:02.099849+00:00 heroku[router]: at=info method=GET 
 path="/favicon.ico" host=front-end-1997.herokuapp.com request_id=e8e1d88e- 
 a621-4dc4-9f33-ffe358b3cd1b fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=3ms status=304 bytes=237 protocol=https

這是UI界面

當我在瀏覽器中打開 main.js 文件時，您可以在其中看到 HTML 代碼。 這怎么可能？ 當我在本地 main.js 中構建 Angular 項目時有 javascript 代碼，但為什么它在瀏覽器上顯示 HTML？

這是我的 dist 文件夾內容，這不是我的 main.js 中的 HTML 代碼

真正出了什么問題？ 這是 heroku 中的錯誤嗎？ 我怎樣才能解決這個問題？

Answer 1

給定的目錄名稱似乎有問題

'/dist/my-first-app'

在 server.js 文件中。

請查看運行后在項目的dist文件夾下創建的目錄

ng build 

根據該更改 server.js 文件中的文件夾名稱。 希望它應該工作！