无法在 Angular 上获取 API 数据

Question

我已将我的项目上传到 Heroku，其中 Django Rest 作为后端，Angular 作为前端。除了我无法在https://branches-front-shiv.herokuapp.com/ 中获取 API 请求（分支/）外，一切都在本地运行良好。

所以在上图中，您可以看到左侧有空白输出，来自branches-front-shiv.herokuapp.com，右侧有表格、分页控件。我没有任何错误，它只是一个空白页面（我猜是因为这些 API 请求）。不知道怎么解决。

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]
})

在评论部分提及您想查看的任何其他代码文件。谢谢。

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

在您的 app.routing.ts 中，您将 branches 定义为 url 路径，

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

service.ts 还有参考 /branches/ 用于获取 API 请求，这可能会覆盖您的 url 路径。

尝试将其中一个更改为空字符串：

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

Answer 2

您需要定义规则来重写 URL 并指向反向代理服务器中的 index.html。 Angular 是一个拥有自己路由器的 SPA。您需要将所有请求重定向到处理路由的 index.html。