Http interceptor called twice. See http://stackoverflow.com/q/37490230/5751783

<!DOCTYPE html>
<html>

<head>
  <title>Angular 2.1.2 + TypeScript Starter Kit</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
  <script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
  <script src="https://unpkg.com/typescript@2.1.4/lib/typescript.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

# Angular 2.0.0 + TypeScript Plunker Starter Kit

I couldn't find this elsewhere, so I created one. 
This is a simple Angular 2.0.0 (final) + TypeScript plunker. Fork it.

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    app: "./src",
    
    '@angular/core': 'npm:@angular/core@2.4.1/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@2.4.1/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@2.4.1/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.1/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.1/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@2.4.1/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@3.4.1/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@2.4.1/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core@2.4.1/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles@2.4.1/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler@2.4.1/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser@2.4.1/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic@2.4.1/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http@2.4.1/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router@2.4.1/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  }
});

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

import { Component, NgModule, OnInit } from '@angular/core';
import { Http, HttpModule, XHRBackend, RequestOptions, } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { PubSubService } from './pubsubService' ;
import { CustomHttp } from './customhttp' ;
import { HelloWorldComponent } from './hello_world' ;

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello World !</h1>
    <hello-world></hello-world>
  `
})
export class App implements OnInit {
  constructor() {}
  
  ngOnInit() {}
}

@NgModule({
  imports: [ BrowserModule, HttpModule, FormsModule ],
  declarations: [ App, HelloWorldComponent ],
  bootstrap: [ App ],
  providers: [PubSubService, 
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, pubsub: PubSubService) => new CustomHttp(backend, defaultOptions, pubsub),
      deps: [XHRBackend, RequestOptions, PubSubService]
    }
  ]
})
export class AppModule {}

import {Injectable} from '@angular/core';
import {HTTP_PROVIDERS, Http, Request, RequestOptionsArgs, Response, XHRBackend, RequestOptions, ConnectionBackend, Headers} from '@angular/http';
import 'rxjs/Rx';
import {PubSubService} from './pubsubService';

@Injectable()
export class CustomHttp extends Http {
  _pubsub: PubSubService
   constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, pubsub: PubSubService) {
     
        super(backend, defaultOptions);
        this._pubsub = pubsub;
    }
 
    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }
 
    // get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    //   debugger;
    //     return this.intercept(super.get(url,options));
    // }
 
    // post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {   
    //     return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    // }
 
    // put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    //     return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    // }
 
    // delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    //     return this.intercept(super.delete(url, options));
    // }
    
    getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Content-Type', 'application/json');
        return options;
    }
  
    intercept(observable: Observable<Response>): Observable<Response> {
      this._pubsub.beforeRequest.emit("beforeRequestEvent");
      //this will force the call to be made immediately..  
      return observable.do(() => this._pubsub.afterRequest.emit("afterRequestEvent");
          );  
    }

   
}

import {Subject } from 'rxjs/Subject';

export class RequestEventEmitter extends Subject<String>{
    constructor() {
        super();
    }
    emit(value) { super.next(value); }
}

export class ResponseEventEmitter extends Subject<String>{
    constructor() {
        super();
    }
    emit(value) { super.next(value); }
}

<div>
  <label>Name:</label>
  <!-- data-bind to the input element; store value in yourName -->
  <input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
  <hr>
  <!-- conditionally display `yourName` -->
  <h1 [hidden]="!yourName">Hello {{yourName}}!</h1>
  
  <button (click)="reload()">Refrsh data</button>
  
  <div *ngIf="showLoader" style="padding:5px; font-weight:bold">Getting Users</div>
  <ul *ngIf="!showLoader">
    <li *ngFor="let item of users; let i = index">
      {{item.email}}
    </li>
  </ul>
</div>

import {Component,Injectable, OnInit} from '@angular/core';

import {Http} from '@angular/http';
import 'rxjs/Rx';
import {PubSubService} from './pubsubService';

@Component({
  selector: 'hello-world',
    templateUrl: 'src/hello_world.html'
})
export class HelloWorldComponent implements OnInit {
  users;
  showLoader = false;
  _pubsub:PubSubService;
  
  constructor(public http:Http, public pubsub: PubSubService) {
    this._pubsub = pubsub;
  }
   ngOnInit() {
     this._pubsub.beforeRequest.subscribe(data => console.log("Before request"));
     this._pubsub.afterRequest.subscribe(data => console.log("After request"));
     
    this.reload();
    
  }
  // Declaring the variable for binding with initial value
  yourName: string = 'Dynamic Request Loader';
  
  reload() {
      this.http.get('https://jsonplaceholder.typicode.com/users')
        .map(res => res.json())
        .subscribe(
          data => { this.users = data},
          err => console.log(err),
          () => console.log('Get Users Complete')
        );  
  
  }
}

import {Injectable} from '@angular/core';
import {RequestEventEmitter, ResponseEventEmitter} from './emitter';

@Injectable()
export class PubSubService{
   beforeRequest:RequestEventEmitter;
   afterRequest:ResponseEventEmitter;
   constructor(){
       this.beforeRequest = new RequestEventEmitter();
       this.afterRequest = new ResponseEventEmitter();
   }
}