部署到heroku后的空白页面？

Question

最近我使用以下方法创建了一个简单的项目：

1. 姜戈休息https://branches-shiv.herokuapp.com/branches/
2. 角 https://branches-front-shiv.herokuapp.com/

我有两个单独的 Django 和 Angular 文件夹，它们也成功连接，它们在本地工作正常，但在部署到 Heroku Angular 后，前端显示除标题外的空白页面。链接在这里。 https://branches-front-shiv.herokuapp.com/

server.js

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/angular'));
app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname +
        '/dist/myapp/index.html'));
});
app.listen(process.env.PORT || 8080);

package.json

 "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "heroku-postbuild": "ng build --prod",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "engines": {
    "node": "14.15.3",
    "npm": "6.14.9"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.5",
    "@angular/cli": "~11.0.5",
    "@angular/common": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/forms": "~11.0.5",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "bootstrap-icons": "^1.2.2",
    "express": "^4.17.1",
    "ng-multiselect-dropdown": "^0.2.14",
    "ng2-order-pipe": "^0.1.5",
    "ng2-search-filter": "^0.5.1",
    "ngx-pagination": "^5.0.0",
    "path": "^0.12.7",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.3",
    "typescript": "~4.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",

api.servcie.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ShareService {
  readonly APIUrl = "https://branches-shiv.herokuapp.com";
  readonly PhotoUrl = "http://127.0.0.1:8000/media/";

  constructor(private http: HttpClient) { }

  getBranchList(): Observable<any[]> {
    return this.http.get<any[]>(this.APIUrl + '/branches/');
  }

  getAllNames(): Observable<any[]> {
    return this.http.get<any[]>(this.APIUrl + '/branches/');
  }
}

请告诉我您是否还想查看其他文件。 这是它在本地主机上的工作方式：