在 heroku 中部署 Angular 应用程序时出现问题

Question

I am trying to deploy an Angular project in the Heroku platform, Project got deployed but I am trying to access it's showing an empty page in the screen and when I open logs I am facing a weird error like "Uncaught SyntaxError: Unexpected token '<' " This is my package.json file.我正在尝试在 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"
        }
       }

This is my server.js file这是我的 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

These are my logs这些是我的日志

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

This is the Ui screen这是UI界面

when I open the main.js file in the browser you can see HTML code inside it.当我在浏览器中打开 main.js 文件时，您可以在其中看到 HTML 代码。 How is this even possible?这怎么可能？ when I build an Angular project in local main.js has javascript code, but why it's showing HTML on the browser?当我在本地 main.js 中构建 Angular 项目时有 javascript 代码，但为什么它在浏览器上显示 HTML？

This my dist folder content and this is no HTML code inside my main.js这是我的 dist 文件夹内容，这不是我的 main.js 中的 HTML 代码

What really went wrong?真正出了什么问题？ Is that a bug in heroku?这是 heroku 中的错误吗？ How can I fix this?我怎样才能解决这个问题？

Answer 1

it seems there is an issue with your directory name given给定的目录名称似乎有问题

'/dist/my-first-app'

in server.js file.在 server.js 文件中。

please take a look at directory created under the dist folder of your project after you run请查看运行后在项目的dist文件夹下创建的目录

ng build

according to that change the folder name in the server.js file.根据该更改 server.js 文件中的文件夹名称。 Hope it should work !!!希望它应该工作！

在 heroku 中部署 Angular 应用程序时出现问题

问题描述

1 个解决方案

解决方案1
0 2020-07-13 08:35:23

在 heroku 中部署 Angular 应用程序时出现问题

问题描述

1 个解决方案

解决方案1 0 2020-07-13 08:35:23

解决方案1
0 2020-07-13 08:35:23