Angular project - работает нормально на локальном сервере, но не на github

Question

Мой угловой проект работает нормально на локальном сервере.Но когда я размещаю его через github, он не работает.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { XyzService } from './xyz.service';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
export class AppComponent {
 name:string;
 dictData:any;


constructor(private _route: ActivatedRoute, private router: Router, private xyzService: XyzService, ) {}

getData() {
  this.xyzService.getDictonaryData(this.name).subscribe(
    data => {

        this.dictData = data;
          console.log(this.dictData);
          } ,

      error => {
          console.log("some error occured");
          console.log(error.errorMessage);
      }
  );

  }}

xyz.service.ts

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from "@angular/common/http";
import {Http, Response} from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';



 @Injectable({
  providedIn: 'root'
 })
  export class XyzService {
  word: String = "aardvark";
  constructor(private _http: HttpClient) {}
  private handleError(err: HttpErrorResponse) {
       console.log(err.message);
      return Observable.throw(err.message);
  }
   getDictonaryData(name?): any {
       if(name){
           this.word = name
       }
    let myResponse = this._http.get('/oxfordapi/' + this.word);
   return myResponse;

   } 
 }

app.component.html

<input id="name" type="text" [(ngModel)]="name"/>
<button (click)="getData()"> Get Data </button>

<div class="row" *ngIf="dictData">
<h2>{{dictData["results"][0]["lexicalEntries"][0]["entries"][0]["senses"][0]["definitions"]}}

</h2>
</div>

прокси.config.cli

 {
"/oxfordapi": {
  "target": "https://od-api.oxforddictionaries.com/api/v1/entries/en/",
  "secure": true,
  "changeOrigin": true,
  "logLevel": "debug",
  "headers": {
    "Accept": "application/json",
    "app_id": "4ebd*****1",
    "app_key": "7d0740a12******bbc66907835843d6f"
  },
  "pathRewrite": {"^/oxfordapi" : ""}
}
   }

Наконец, я использовал ng build --prod и загрузил файл dist на github. Когда я размещаю его через github, он выдает

"polyfills.2341d85fe336aa23ce7f.bundle.js: 1 o / oxfordapi / hi 404 () ".

Но когда я запускаю свой проект на локальном сервере (localhost: 4200), тогда он работает нормально.

Answer 1

Конфигурации прокси предназначены только для сервера разработки (т. Е. ng serve).

Вы захотите поместить свои URL-адреса API в среды (т. Е. Поместить рабочий URL-адрес в environments.prod.ts и импортировать среды из службы (т. Е. import { environment } from '../../environment';). Важно, чтобы вы импортировали базу / default environment, так как угловой компилятор будет вставлять правильный файл окружения на основе флага --environment, который по умолчанию равен prod, когда вы запускаете ng build --prod. Вы можете переопределить его с помощью ng CMD -e ENV, где указан cmd, протестируйте , e2e, build и т. д., а ENV - это имя и суффикс среды.

Примечание: в этом ответе предполагается, что вы используете angular-cli