Node.js application deployed on Heroku infinitely loading? - node.js

Question

I deploy my Angular application to Heroku, with Node.js as the backend. However, when I deploy to Heroku, the static files page works fine. The page that needs data from backend is infinitely loading.
This is my Github link: https://github.com/JNUGroup/COVID-19_heroku
my index.js as the server file like this:
const port = process.env.PORT || 3001;
app.use(express.static(__dirname + '/dist/covid19-tracker'));
app.get('/*', function(req, res){
res.sendFile(path.join(__dirname + '/dist/covid19-tracker/index.html'));
});
app.set('port',port);
app.listen(port, () => {
console.log(`Listening on port:${port}`);
});
my package.json look like this:
{
"name": "covid19-tracker",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node index.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build --prod"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.1.0",
"#angular/cli": "~9.1.0",
"#angular/common": "~9.1.0",
"#angular/compiler": "~9.1.0",
"#angular/compiler-cli": "~9.1.0",
"#angular/core": "~9.1.0",
"#angular/forms": "~9.1.0",
"#angular/platform-browser": "~9.1.0",
"#angular/platform-browser-dynamic": "~9.1.0",
"#angular/router": "~9.1.0",
"chart.js": "^2.9.3",
"enhanced-resolve": "^4.1.1",
"express": "^4.17.1",
"leaflet": "^1.6.0",
"locutus": "^2.0.11",
"mocha": "^7.1.2",
"ng2-google-charts": "^5.0.0",
"ngx-bootstrap": "^5.5.0",
"ngx-spinner": "^9.0.2",
"ngx-toastr": "^12.0.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"typescript": "~3.8.3",
"zone.js": "~0.10.2",
"cors": "^2.8.5",
"cross-fetch": "^3.0.4",
"node-fetch": "^2.6.0",
"nodemailer": "^6.4.6",
"novelcovid": "^1.1.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.0",
"#angular/language-service": "~9.1.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0"
},
"engines": {
"node": "12.16.1",
"npm": "6.13.4"
}
}
and all the build is successful. It just cannot read data from backend. I cannot figure it out, hope anyone could give me some suggestion.