Angular 5 Geben Sie http Abfangjäger auf Umwelt basiert

Question

Ich habe die folgenden zwei Umgebungen in meinem Winkel cli (v1.5.1, Winkel v5) Anwendung:

1. dev
2. prod

Dev nutzt Pseudo-Daten, die ich mit einem http-Interceptor zur Verfügung stelle. Pro nutzt eine Live-Pause-API.

Wie stelle ich den http-Interceptor auf dev, aber nicht auf pro? Ich habe bereits versucht, die folgenden, aber es funktioniert nicht:

{ 
    provide: HTTP_INTERCEPTORS, 
    useFactory:() => { 
    if (environment.useMockBackend === true) { 
     return MockHttpInterceptor; 
    } 
    return false; 
    }, 
    multi: true 
} 

Answer 1

Die Idee ist, Abfangjäger Anbieter von Umwelt-Datei, prod Umwelt Exporte do-nothing Abfangjäger oder irgendein anderer Dummy-Provider (können Name es DefaultHttpInterceptor zu exportieren) und dev exportiert MockHttpInterceptor.

dev Umgebung: export const INTERCEPTORS = {provide: HTTP_INTERCEPTORS, ... MockHttpInterceptor}

prod Umgebung: export const INTERCEPTORS = {provide: HTTP_INTERCEPTORS, ... DefaultHttpInterceptor}

Dann können Sie es wie gewohnt verwenden:

import { INTERCEPTORS } from './../environments/environment'; 
@NgModule({ 
providers  : [ 
     ... 
     INTERCEPTORS 
     ... 
    ] 
... 
}) 

Answer 2

In meinem Angular 5.2 Projekt verwendete ich Ansatz folgt.

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; 
import { environment } from '../environments/environment'; 
import { MyInterceptor } from './my.interceptor'; 

const commonProviders = [/*...*/]; 
const nonProductionProviders = [{ 
    provide: HTTP_INTERCEPTORS, 
    useClass: MyInterceptor, 
    multi: true 
}]; 

@NgModule({ 
    imports: [ 
    HttpClientModule, 
    // ... 
    ], 
    providers: [ 
    ...commonProviders, 
    ...!environment.production ? nonProductionProviders : [] 
    ] 
}) 

my.interceptor.ts

import { Injectable } from '@angular/core'; 
import { HttpEvent, HttpRequest, HttpInterceptor, HttpHandler } from '@angular/common/http'; 
import { Observable } from 'rxjs'; 

@Injectable() 
export class MyInterceptor implements HttpInterceptor { 
    intercept(
    req: HttpRequest<any>, 
    next: HttpHandler 
): Observable<HttpEvent<any>> { 
    // ... 
    return next.handle(req); 
    } 
}