#12 Example now has dashboard in api root, and improved http logging

src/app/app.component.html

@@ -2,7 +2,7 @@ <h1>{{title}}</h1>
 <ng-container *resourceData="let data of apiLocation" [resourceContext]="data">
   <nav>
     <!-- TODO -->
-    <a [resourceLink]="'/api/dashboard'">Dashboard</a>
+    <a [resourceLink]="'/api'">Dashboard</a>
     <a [resourceLink]="'/api/heroes'">Heroes</a>
   </nav>
 

src/app/in-memory-data.service.ts

@@ -54,15 +54,15 @@ export class InMemoryDataService implements InMemoryDbService {
           'Content-Type': HEROES_TYPE
         })
       }));
-    } else if (request.url.endsWith('/api/dashboard')) {
+    } else if (request.url.endsWith('/api')) {
       const collection = (request.utils.getDb() as any).heroes;
 
       return request.utils.createResponse$(() => ({
         url: request.url,
         body: JSON.stringify(<Heroes>{
           items: collection.slice(1, 5).map(hyperHero),
           _links: {
-            self: {href: '/api/dashboard'},
+            self: {href: '/api'},
           }
         }),
         status: 200,

src/app/message-http-interceptor.ts

@@ -1,5 +1,12 @@
 import { Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest, HttpResponseBase } from '@angular/common/http';
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpHeaders,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponseBase
+} from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/do';
 import { MessageService } from './message.service';
@@ -10,13 +17,18 @@ import { MessageService } from './message.service';
 @Injectable()
 export class MessageHttpInterceptor implements HttpInterceptor {
 
+  private static nextId = 1;
+
   constructor(private readonly messageService: MessageService) {
   }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const id = MessageHttpInterceptor.nextId++;
+    this.messageService.add(`[${id}] ${req.method} ${req.url} (${dumpHeaders(req.headers)})`);
+
     return next.handle(req).do((res: HttpEvent<any>) => {
       if (res instanceof HttpResponseBase) {
-        this.messageService.add(`${req.method} ${req.url} => ${res.status} ${res.statusText} (${dumpHeaders(res.headers)})`);
+        this.messageService.add(`[${id}] => ${res.status} ${res.statusText} (${dumpHeaders(res.headers)})`);
       }
     });
   }