I have the following two environments in my angular-cli (v1.5.1, angular v5) application:

1. dev
2. prod

Dev makes use of mock data, which I provide with an http-interceptor. Pro makes use of a live rest api.

How do I provide the http-interceptor on dev, but not on pro? I already tried the following, but it doesn't work:

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

I have the following two environments in my angular-cli (v1.5.1, angular v5) application:

1. dev
2. prod

Dev makes use of mock data, which I provide with an http-interceptor. Pro makes use of a live rest api.

How do I provide the http-interceptor on dev, but not on pro? I already tried the following, but it doesn't work:

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

• javascript
• angular
• angular-http-interceptors

3 Answers 3

In my Angular 5.2 project I used following approach.

app.module.ts

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

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

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

my.interceptor.ts

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

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

I've e up with the following approach (this is in Angular 7), by drawing on the previous answers from @dhilt and @kemsky:

Your dev environment file

import { HTTP_INTERCEPTORS } from '@angular/mon/http';
import { MyDevInterceptor} from './my-dev.interceptor';

export const ENVIRONMENT_SPECIFIC_PROVIDERS = [
  { provide: HTTP_INTERCEPTORS, useClass: MyDevInterceptor, multi: true }
];

environment.prod.ts

export const ENVIRONMENT_SPECIFIC_PROVIDERS = [];

app.module.ts

@NgModule({
  declarations: [],
  imports: [
    HttpClientModule
  ],
  providers: [
    ENVIRONMENT_SPECIFIC_PROVIDERS
  ]
})

It's simple, it works a treat, and it means that your code base contains no references to anything that's not required by your environment.

The idea is to export interceptor providers from environment file, prod environment exports do-nothing interceptor or just any other dummy provider (lets name it DefaultHttpInterceptor) and dev exports MockHttpInterceptor.

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

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

Then you can use it like usual:

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