src/app/app.config.ts

@@ -1,16 +1,15 @@
 import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+
 import { routes } from './app.routes';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService } from './in-memory-data.service';
-import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    //provideBrowserGlobalErrorListeners(),
+    provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes),
-    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, {delay:150})),
+    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, {delay:150}))
-    provideHttpClient()
   ]
 };

src/app/dashboard/dashboard.component.ts

@@ -17,7 +17,6 @@ export class DashboardComponent implements OnInit {
 
   ngOnInit(): void {
     this.getHeroes();
-    console.log(this.heroes)
   }
 
   getHeroes(): void {

src/app/hero-detail/hero-detail.component.html

@@ -1,4 +1,7 @@
 <div *ngIf="hero">
+
+  <button type="button" (click)="goBack()">go back</button>
+
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
@@ -7,5 +10,3 @@
   </div>
 
 </div>
-<button type="button" (click)="goBack()">go back</button>
-<button type="button" (click)="save()">save</button>

src/app/hero-detail/hero-detail.component.ts

@@ -39,11 +39,4 @@ export class HeroDetailComponent {
       .subscribe(hero => this.hero = hero);
   }
 
-  save(): void {
-    if (this.hero) {
-      this.heroService.updateHero(this.hero)
-        .subscribe(() => this.goBack());
-    }
-  }
-
 }

src/app/hero.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
 import { catchError, Observable, of, tap } from 'rxjs';
 import { MessageService } from './message.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
@@ -9,39 +10,39 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 })
 
 export class HeroService {
-  
-httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
-};
 
   constructor(
   private http: HttpClient,
   private messageService: MessageService) { }
 
+  /*getHeroes(): Observable<Hero[]> {
+    const heroes = of(HEROES);
+    this.messageService.add('HeroService: fetched heroes');
+    return heroes;
+  } */
+  
 
   /** GET heroes from the server */
   getHeroes(): Observable<Hero[]> {
       return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
-        tap(h => this.log(JSON.stringify(h))),
+        tap(_ => this.log('fetched heroes')),
         catchError(this.handleError<Hero[]>('getHeroes', []))
       );
     }
 
-  /** GET hero by id. Will 404 if id not found */
   getHero(id: number): Observable<Hero> {
-    const url = `${this.heroesUrl}/${id}`;
+    // For now, assume that a hero with the specified `id` always exists.
-    return this.http.get<Hero>(url).pipe(
+    // Error handling will be added in the next step of the tutorial.
-      tap(_ => this.log(`fetched hero id=${id}`)),
+    const hero = HEROES.find(h => h.id === id)!;
-      catchError(this.handleError<Hero>(`getHero id=${id}`))
+    this.messageService.add(`HeroService: fetched hero id=${id}`);
-    );
+    return of(hero);
   }
 
       /** Log a HeroService message with the MessageService */
   private log(message: string) {
     this.messageService.add(`HeroService: ${message}`);
   }
-  
   private heroesUrl = 'api/heroes';  // URL to web api
 
   /**
@@ -51,28 +52,19 @@ httpOptions = {
  * @param operation - name of the operation that failed
  * @param result - optional value to return as the observable result
  */
-  private handleError<T>(operation = 'operation', result?: T) {
+private handleError<T>(operation = 'operation', result?: T) {
-    return (error: any): Observable<T> => {
+  return (error: any): Observable<T> => {
 
-      // TODO: send the error to remote logging infrastructure
+    // TODO: send the error to remote logging infrastructure
-      console.error(error); // log to console instead
+    console.error(error); // log to console instead
 
-      // TODO: better job of transforming error for user consumption
+    // TODO: better job of transforming error for user consumption
-      this.log(`${operation} failed: ${error.message}`);
+    this.log(`${operation} failed: ${error.message}`);
 
-      // Let the app keep running by returning an empty result.
+    // Let the app keep running by returning an empty result.
-      return of(result as T);
+    return of(result as T);
-    };
+  };
-
-  }
-
-  /** PUT: update the hero on the server */
-updateHero(hero: Hero): Observable<any> {
-  return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
-    tap(_ => this.log(`updated hero id=${hero.id}`)),
-    catchError(this.handleError<any>('updateHero'))
-  );
 }
-  
+
 
 }

src/app/heroes/heroes.component.ts

@@ -3,6 +3,7 @@ import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HeroService } from '../hero.service'; //новая библиотека добавлена вместо HEROES
+import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
 import { MessageService } from '../message.service';
 import { RouterLink } from '@angular/router';
 
@@ -25,6 +26,8 @@ export class HeroesComponent implements OnInit {
     this.getHeroes();
   }
 
+  
+
   getHeroes(): void {
     this.heroService.getHeroes()
         .subscribe(heroes => this.heroes = heroes);