unable to get API data on Angular

Question

I have uploaded my project to Heroku which have Django Rest as backend and Angular as frontend. Everything is working fine locally except I am unable to get API request (branches/) in https://branches-front-shiv.herokuapp.com/.

So in above picture as you can see there is blank output in the left side which is from branches-front-shiv.herokuapp.com and in right side we have table, pagination controls. I don't have any errors it's just a blank page (because of these API request I guess). I don't know how to solve it.

components.ts

export class ShowBranchesComponent implements OnInit {

  branches: any = [];
  branchName: any; // any
  p: number = 1;

  options = ["All Cities", 'MUMBAI', 'KOLKATA', 'DEHLI', 'CHANDIGARH', 'NOIDA']
  selected: any = "All Cities";
  selectedData: any;

  constructor(private service: ShareService) { }

  ngOnInit(): void {
    // this.refreshBranchList();
    this.service.getBranchList().subscribe((response: any) => {
      this.branches = response;
      this.selectedData = this.branches;
    });
  }

service.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/');
  }
}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BranchesComponent } from './branches/branches.component';
import { ShowBranchesComponent } from './branches/show-branches/show-branches.component';
import { ShareService } from './share.service'

import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { Ng2OrderModule } from 'ng2-order-pipe';
import { NgxPaginationModule } from 'ngx-pagination';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

@NgModule({
  declarations: [
    AppComponent,
    BranchesComponent,
    ShowBranchesComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    Ng2SearchPipeModule,
    Ng2OrderModule,
    NgxPaginationModule,
    NgMultiSelectDropDownModule.forRoot()
  ],
  providers: [ShareService],
  bootstrap: [AppComponent]
})

mention any other code file you want to see in comment section. Thankyou.

app.components.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular';
}

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);

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BranchesComponent } from './branches/branches.component';

const routes: Routes = [
  { path: 'branches', component: BranchesComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

In your app.routing.ts you are defining branches as urls path,

const routes: Routes = [
  { path: 'branches', component: BranchesComponent },
];

service.ts there is also reference /branches/ for getting API request, which might over writing your urls paths.

Try changing one of them to empty string:

const routes: Routes = [
      { path: '', component: BranchesComponent },
    ];

Answer 2

You need to define rules to rewrite URL and point to index.html in your reverse proxy server. Angular is a SPA with its own router. You need to redirect all requests to index.html which will deal with the routing.