Cleaned up error handling example

Author: brandonroberts

public/docs/_examples/rxjs/ts/src/app/add-hero.component.html

@@ -2,18 +2,12 @@
 // #docregion
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AddHeroComponent }     from './add-hero.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-import { HeroSearchComponent }  from './hero-search.component';
 import { HeroListComponent }    from './hero-list.component';
 import { HeroCounterComponent } from './hero-counter.component';
 
 const appRoutes: Routes = [
-  { path: 'heroes/add', component: AddHeroComponent },
-  { path: 'heroes/search', component: HeroSearchComponent },
   { path: 'hero/counter', component: HeroCounterComponent },
   { path: 'heroes', component: HeroListComponent },
-  { path: 'hero/:id', component: HeroDetailComponent },
   { path: '', redirectTo: '/heroes', pathMatch: 'full' },
 ];
 

public/docs/_examples/rxjs/ts/src/app/add-hero.component.ts

@@ -10,8 +10,6 @@ import { EventAggregatorService } from './event-aggregator.service';
 
     <a routerLink="/heroes">Heroes</a><br>
     <a routerLink="/hero/counter">Hero Counter</a><br>
-    <a routerLink="/heroes/add">Add Hero</a><br>
-    <a routerLink="/heroes/search">Hero Search</a>
 
     <router-outlet></router-outlet>
 

public/docs/_examples/rxjs/ts/src/app/api-error-handler.service.ts

@@ -6,21 +6,17 @@ import { ReactiveFormsModule }  from '@angular/forms';
 
 import { AppComponent }               from './app.component';
 import { AppRoutingModule }           from './app-routing.module';
-import { AddHeroComponent }           from './add-hero.component';
-import { LoadingComponent }           from './loading.component';
-import { HeroSearchComponent }        from './hero-search.component';
-import { HeroDetailComponent }        from './hero-detail.component';
 import { HeroListComponent }          from './hero-list.component';
 import { HeroCounterComponent }       from './hero-counter.component';
 import { MessageLogComponent }        from './message-log.component';
+import { LoadingComponent }           from './loading.component';
 
 import { LoadingService }             from './loading.service';
 import { HeroService }                from './hero.service';
 
 // #docregion event-aggregator-import
 import { EventAggregatorService }     from  './event-aggregator.service';
 // #enddocregion event-aggregator-import
-import { ApiErrorHandlerService } from './api-error-handler.service';
 
 // Imports for loading & configuring the in-memory web api
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
@@ -36,19 +32,15 @@ import { InMemoryDataService }  from './in-memory-data.service';
   ],
   declarations: [
     AppComponent,
-    AddHeroComponent,
-    LoadingComponent,
-    HeroSearchComponent,
-    HeroDetailComponent,
-    HeroListComponent,
     HeroCounterComponent,
-    MessageLogComponent
+    HeroListComponent,
+    MessageLogComponent,
+    LoadingComponent
   ],
   providers: [
     HeroService,
     LoadingService,
-    EventAggregatorService,
-    ApiErrorHandlerService
+    EventAggregatorService
   ],
   bootstrap: [ AppComponent ]
 })

public/docs/_examples/rxjs/ts/src/app/app-routing.module.ts

@@ -37,11 +37,19 @@ export class HeroCounterComponent implements OnInit, OnDestroy {
       }, 1000);
     });
 
-    this.counter$
+    let counter1Sub = this.counter$
+      .takeUntil(this.onDestroy$)
+      .subscribe();
+
+    let counter2Sub = this.counter$
+      .takeUntil(this.onDestroy$)
+      .subscribe();
+
+    let counter3Sub = this.counter$
       .takeUntil(this.onDestroy$)
       .subscribe();
   }
-  
+
 // #docregion ngOnDestroy-complete
   ngOnDestroy() {
     this.onDestroy$.complete();

public/docs/_examples/rxjs/ts/src/app/app.component.ts

@@ -1,17 +1,13 @@
 // #docplaster
 // #docregion
-// #docregion retry-operator
-import 'rxjs/add/operator/retry';
-// #enddocregion retry-operator
-import 'rxjs/add/observable/of';
-// #docregion failed-heroes
 import { Component, OnInit }   from '@angular/core';
 import { Observable }          from 'rxjs/Observable';
 
 import { HeroService }   from './hero.service';
 import { Hero }          from './hero';
 
 @Component({
+// #docregion async-pipe
   template: `
     <h2>HEROES</h2>
     <ul class="items">
@@ -20,7 +16,9 @@ import { Hero }          from './hero';
       </li>
     </ul>
   `
+// #enddocregion async-pipe
 })
+// #docregion observable-heroes
 export class HeroListComponent implements OnInit {
   heroes$: Observable<Hero[]>;
 
@@ -29,15 +27,7 @@ export class HeroListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    // #docregion failed-heroes
-    this.heroes$ = this.service.getFailedHeroes()
-    // #enddocregion failed-heroes
-      .catch((error: any) => {
-        console.log(`An error occurred: ${error}`);
-
-        return Observable.of([]);
-      });
-    // #docregion failed-heroes
+    this.heroes$ = this.service.getHeroes();
   }
 }
 // #enddocregion