Question

我的角度项目在本地服务器上运行正常。但是，当我通过github托管它时，它将无法正常工作。

app.component.ts

import re

datauri =  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8  /w38GIAXDIBKE0DHxgl
jNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

imgstr = re.search(r'base64,(.*)', datauri).group(1)

output = open('output.png', 'wb')

output.write(imgstr.decode('base64'))

output.close()

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

  }}

app.component.html

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;

   } 
 }

proxy.config.cli

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

最后我使用{ "/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" : ""} } }并将dist文件上传到github上。当我通过github托管它时，它给出了错误

“ polyfills.2341d85fe336aa23ce7f.bundle.js：1 o / oxfordapi / hi 404（）”。

但是当我在本地服务器（localhost：4200）上运行项目时，它就可以正常工作。

Answer 1

代理配置仅适用于开发服务器（即ng serve）。

您需要将API网址放入环境中（例如，将生产网址放入environments.prod.ts中，并从服务中导入环境（例如import { environment } from '../../environment';）。导入基本/默认environment，因为angular cli编译器将基于--environment标志注入正确的环境文件，当您运行prod时默认为ng build --prod。您可以覆盖它与ng CMD -e ENV一起使用，其中cmd用于服务，测试，端到端，构建等，而ENV是环境的名称和后缀。

注意：此答案假设您使用的是cli-cli

Angular项目-在本地服务器上工作正常，但在github上工作不正常

1 个答案: