Блог

Я загрузил свой проект в Heroku, в котором Django Rest используется в качестве серверной части, а Angular — в качестве интерфейса. Локально все работает нормально, за исключением того, что я не могу получить запрос API (ветки /) в https://branches-front-shiv.herokuapp.com /.

Итак, на картинке выше, как вы можете видеть, в левой части есть пустой вывод, который из 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 { }
 

В вашем app.routing.ts вы определяете ветви как путь urls,

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

service.ts существует также ссылка /branches/ для получения запроса API, который может перезаписывать ваши URL-адреса.

Попробуйте изменить один из них на пустую строку:

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

Вам необходимо определить правила для перезаписи URL и указать на index.html на вашем обратном прокси-сервере. Angular — это SPA со своим собственным маршрутизатором. Вам необходимо перенаправить все запросы на index.html который будет иметь дело с маршрутизацией.