src/app/app.config.ts

@@ -1,16 +1,16 @@
 import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { routes } from './app.routes';
-import { provideHttpClient } from '@angular/common/http';
+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: [
-    provideHttpClient(),
-    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 150 })),
-    provideBrowserGlobalErrorListeners(),
+    //provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes),
+    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, {delay:150})),
+    provideHttpClient()
   ]
 };

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

@@ -5,7 +5,7 @@
     <label for="hero-name">Hero name: </label>
     <input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
   </div>
-</div>
 
+</div>
 <button type="button" (click)="goBack()">go back</button>
 <button type="button" (click)="save()">save</button>

src/app/hero.service.ts

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Hero } from './hero';
+import { catchError, Observable, of, tap } from 'rxjs';
 import { MessageService } from './message.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { catchError, map, tap } from 'rxjs/operators';
-import { Observable, of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -11,25 +10,23 @@ import { Observable, of } from 'rxjs';
 
 export class HeroService {
   
-  private heroesUrl = 'api/heroes';  // URL to web api
-    
-  httpOptions = {
-    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
-  };
+httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
 
   constructor(
-    private http: HttpClient,
-    private messageService: MessageService) 
-  { }
+  private http: HttpClient,
+  private messageService: MessageService) { }
+
 
   /** GET heroes from the server */
   getHeroes(): Observable<Hero[]> {
-    return this.http.get<Hero[]>(this.heroesUrl)
+      return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
-        tap(_ => this.log('fetched heroes')),
+        tap(h => this.log(JSON.stringify(h))),
         catchError(this.handleError<Hero[]>('getHeroes', []))
       );
-  }
+    }
 
   /** GET hero by id. Will 404 if id not found */
   getHero(id: number): Observable<Hero> {
@@ -40,21 +37,20 @@ export class HeroService {
     );
   }
 
-  /** 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'))
-    );
+      /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add(`HeroService: ${message}`);
   }
+  
+  private heroesUrl = 'api/heroes';  // URL to web api
 
-    /**
-   * Handle Http operation that failed.
-   * Let the app continue.
-   *
-   * @param operation - name of the operation that failed
-   * @param result - optional value to return as the observable result
-   */
+  /**
+ * Handle Http operation that failed.
+ * Let the app continue.
+ *
+ * @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) {
     return (error: any): Observable<T> => {
 
@@ -67,11 +63,16 @@ export class HeroService {
       // Let the app keep running by returning an empty result.
       return of(result as T);
     };
-  }
-  
-  /** Log a HeroService message with the MessageService */
-  private log(message: string) {
-    this.messageService.add(`HeroService: ${message}`);
-  }
-}
 
+  }
+
+  /** 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'))
+  );
+}
+  
+
+}