在heroku中部署Angular应用程序的问题

Posted

技术标签:

【中文标题】在heroku中部署Angular应用程序的问题【英文标题】：Problem in deploying Angular app in heroku 【发布时间】：2020-11-01 21:49:51 【问题描述】：

我正在尝试在 Heroku 平台上部署一个 Angular 项目，项目已部署，但我试图访问它时屏幕上显示一个空白页面，当我打开日志时，我遇到了一个奇怪的错误，例如“Uncaught SyntaxError: Unexpected令牌' 


  "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中的错误吗？我该如何解决这个问题？

【问题讨论】：

如果有任何指向 github.com 的链接，请确保这不是当前正在进行的 GitHub 事件的副作用 (githubstatus.com/incidents/j597fw8kv04c?utm_ts=1594627693) 【参考方案1】：

您的目录名似乎有问题

'/dist/my-first-app'

在 server.js 文件中。

请查看运行后项目dist文件夹下创建的目录

ng build

据此更改 server.js 文件中的文件夹名称。希望它应该工作!!!

【讨论】：

当我在本地运行时，文件是在“/dist/my-first-app/”中生成的，你可以在我的上一个屏幕截图中看到

以上是关于在heroku中部署Angular应用程序的问题的主要内容，如果未能解决你的问题，请参考以下文章

使用 Angular 2 前端部署在 Heroku Java 应用程序上

Spring Boot + Angular 2 Heroku 部署

将 Angular 应用程序部署到 Heroku，构建成功，但在浏览器中显示 404 not found

使用angular 9部署在heroku上的nodejs应用程序中的CORS错误

Heroku 部署无法看到 Angular 组件

Angular 2/Nodejs 部署到 heroku 错误 heroku-postbuild: `ng build`