angular - Blank page after deploying to heroku?

Question

Recently I have created a simple project using:

1. Django Rest https://branches-shiv.herokuapp.com/branches/
2. Angular https://branches-front-shiv.herokuapp.com/

I have two separate folders for both Django and Angular, also connected both successfully, they are just working fine locally but after deploying to Heroku Angular which is frontend showing blank page except heading. here is the link. 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/');
  }
}

Please tell me if any other file you might want to take a look at. here is how it is working on localhost:

Answer 1

等待大神答复