Question

我想通过Angular应用程序访问Azure上的API服务器。该应用程序可以连接到API服务器的本地版本。

Azure上的版本要求标头信息进行身份验证。

我尝试过：

添加标题（请参阅api.service.ts）-几种不同的形式
AuthInterceptor和HttpHeaders

https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Injectable } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { PeopleComponent } from './people/people.component';

import { AuthInterceptor, APIService } from './api.service';

// @Injectable({
//   providedIn: 'root'
// })

@NgModule({
  declarations: [
    AppComponent,
    PeopleComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,

  ],
  providers: [
    APIService,
    // {
    //   provide: HTTP_INTERCEPTORS,
    //   useClass: AuthInterceptor,
    //   multi: true,
    // }
    // ,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpInterceptor, HttpResponse, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';

import { Observable, of } from 'rxjs';
import { catchError, map, tap, concat } from 'rxjs/operators';

import { Person, } from './person';
import { PeopleComponent } from './people/people.component';

@Injectable({
  providedIn: 'root'
})

export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        // 'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

export class APIService {

  public onPremURL = 'http://am-web05:3030/api/v1/';
  public azureURL = 'https://amazng-webapi.azurewebsites.net/api/';

  public baseURL = this.azureURL;

  private skip;
  private limit = 20;
  private lastRecord;
  private headers;
  people: Person[];

  constructor(
    private http: HttpClient,
    private messageService: MessageService){ }

public httpOptions = {
  headers: new HttpHeaders({ 
    'Content-Type': 'application/json',
    "Access-Control-Allow-Origin": 'origin',
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
    "Access-Control-Allow-Headers":
        "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization",
    })
  };

  getDATA (url): Observable<Person[]> {

    url = this.baseURL + url;
    return this.http.get<Person[]>(url, this.httpOptions)
      .pipe(

        tap(people => this.log(this.limit + " people returned")),
        catchError(this.handleError('getPeople', [])),
      );
  }

API应该返回数据

我收到以下错误：

Uncaught Error: Can't resolve all parameters for APIService: (?, ?).
    at syntaxError (compiler.js:2426)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:18979)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:18872)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:19094)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:19103)
    at compiler.js:19041
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:19001)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18720)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26004)

Answer 1

您缺少@Injectable()属性：

@Injectable()
export class APIService {}

无法解析APIService的所有参数

1 个答案: