Блог

Недавно я создал простой проект, используя:

1. Django Rest https://branches-shiv.herokuapp.com/branches /
2. Angular 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/');
  }
}
 

Пожалуйста, скажите мне, есть ли какой-либо другой файл, на который вы, возможно, захотите взглянуть.
вот как это работает на localhost: