Angular 2 RxJs Observables - HTTP catch and release

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 - flatMap</title>
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>
  </head>
  <body>
    <app>Loading...</app>
    
    <script>
      System.import('app');
    </script>
  </body>

</html>

import { Component } from '@angular/core';
import { FormControl, 
	FormGroup, 
	FormBuilder } from '@angular/forms'; 
import { SearchService } from './services/search.service';
import 'rxjs/Rx';

@Component({
	selector: 'app',
	template: `
		<form [formGroup]="coolForm">
		  <input formControlName="search" placeholder="Search Spotify artist">
		  <input (click)="search()" type="submit" value="SearchFor Spotify Artist">
		</form>
		
		<p style="background: tomato; color: white; padding: 1rem;"
		  *ngIf="errorMessage">
		  {{ errorMessage }}
		</p>
		
		<div *ngFor="let artist of result">
		  {{artist.name}}
		</div>
	`
})

export class MyApp {
	searchField: FormControl;
	coolForm: FormGroup;
	errorMessage: string;
	
	constructor(private searchService:SearchService, private fb:FormBuilder) {
		this.searchField = new FormControl();
		this.coolForm = fb.group({ search: this.searchField });
	}
	
	search() {
		const request = this.searchService.search(this.searchField.value)
		  .subscribe(
		    (result) => { this.result = result.artists.items; },
		    (err) => { this.errorMessage = err.message; },
        () => { console.log('Completed'); }
		  );
		  
		setTimeout(() => {
		  request.unsubscribe();
		  this.errorMessage = 'Request cancelled';
		}, 0)
	}
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { MyAppModule } from './app.module'

platformBrowserDynamic().bootstrapModule(MyAppModule)

var angularVersion = '2.0.0';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/forms': 'unpkg:@angular/forms@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'unpkg:@angular/http@'+angularVersion,
    'rxjs': 'unpkg:rxjs@5.0.0-beta.12',
    'zone.js': 'unpkg:zone.js@0.6.25',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class SearchService {
  
  constructor(private http: Http) {}
  
  search(term: string) {
    return this.http.get('https://api.spotify.com/v1/search?q=' + term + '&type=artist')
      .map((response) => response.json());
  }
}

import { BrowserModule }  from '@angular/platform-browser';
import { NgModule } '@angular/core';
import { SearchService } from './services/search.service';
import { MyApp } from './app.component'
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, 
    ReactiveFormsModule, 
    FormsModule, 
    HttpModule],
  providers: [SearchService],
  declarations: [MyApp],
  bootstrap: [MyApp]
})
export class MyAppModule {

}