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

时间：2020-07-12 15:59:54

标签： node.js angularjs angular git heroku

我正在尝试在Heroku平台上部署Angular项目，项目已经部署，但是我试图访问它在屏幕上显示一个空白页面，当我打开日志时，我遇到一个奇怪的错误，例如“ Uncaught SyntaxError：Unexpected令牌'<'“ 这是我的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屏幕 UI screen

当我在浏览器中打开main.js文件时，您会看到其中的HTML代码。这怎么可能？当我在本地main.js中构建Angular项目时，使用javascript代码，但是为什么在浏览器中显示HTML？

main.js file

这是我的dist文件夹的内容，这是我的main.js中没有HTML代码 Dist content

真正出了什么问题？那是heroku中的错误吗？我该如何解决？

1 个答案:

答案 0 :(得分：0)

您的目录名称似乎有问题

'/dist/my-first-app'

在server.js文件中。

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

ng build

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

相关问题
最新问题