Merge branch 'Fixed'

# Conflicts:
#	src/app/app.config.ts
#	src/app/hero-detail/hero-detail.component.html
#	src/app/hero.service.ts
#	src/app/in-memory-data.service.ts

src/app/app.config.ts

@@ -1,16 +1,16 @@
 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 { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
+import { InMemoryDataService } from './in-memory-data.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    //provideBrowserGlobalErrorListeners(),
+    provideHttpClient(),
+    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 150 })),
+    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>
+
 <button type="button" (click)="goBack()">go back</button>
 <button type="button" (click)="save()">save</button>

src/app/hero.service.ts

@@ -1,8 +1,9 @@
 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'
@@ -10,23 +11,25 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 export class HeroService {
   
-httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
-};
+  private heroesUrl = 'api/heroes';  // URL to web api
+    
+  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(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> {
@@ -37,20 +40,21 @@ httpOptions = {
     );
   }
 
-      /** 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'))
+    );
   }
 
-  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> => {
 
@@ -63,16 +67,11 @@ httpOptions = {
       // Let the app keep running by returning an empty result.
       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'))
-  );
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add(`HeroService: ${message}`);
+  }
 }
 
-
-}