chore(404): hook up 404 component

app/components/app.ts

@@ -5,7 +5,7 @@ import { HomeComponent }     from './home';
 import { LoginComponent }    from './login';
 import { RegisterComponent } from './register';
 import { TrackerComponent }  from './tracker';
-import { NotFoundComponent } from './notfound';
+import { NotFoundComponent } from './not-found';
 
 @Component({
   directives: [RouterOutlet],
@@ -17,6 +17,6 @@ import { NotFoundComponent } from './notfound';
   { component: LoginComponent,    name: 'Login',    path: '/login' },
   { component: RegisterComponent, name: 'Register', path: '/register' },
   { component: TrackerComponent,  name: 'Tracker',  path: '/u/:username' },
-  { component: NotFoundComponent,  name: 'NotFound',  path: '/notfound' }
+  { component: NotFoundComponent, name: 'NotFound', path: '/**' }
 ])
 export class AppComponent {}

app/components/not-found.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from 'angular2/core';
+import { Title }             from 'angular2/platform/browser';
+
+import { NavComponent }   from './nav';
+import { SessionService } from '../services/session';
+
+const HTML = require('../views/not-found.html');
+
+@Component({
+  directives: [NavComponent],
+  providers: [SessionService, Title],
+  selector: 'not-found',
+  template: HTML
+})
+export class NotFoundComponent implements OnInit {
+
+  public _session: SessionService;
+
+  private _title: Title;
+
+  constructor (_session: SessionService, _title: Title) {
+    this._session = _session;
+    this._title = _title;
+  }
+
+  public ngOnInit () {
+    this._title.setTitle('404 Not Found | Pokédex Tracker');
+  }
+
+}

app/components/tracker.ts

@@ -2,19 +2,20 @@ import { Component, OnInit } from 'angular2/core';
 import { RouteParams }       from 'angular2/router';
 import { Title }             from 'angular2/platform/browser';
 
-import { Capture }        from '../classes/capture';
-import { CaptureService } from '../services/capture';
-import { DexComponent }   from './dex';
-import { InfoComponent }  from './info';
-import { NavComponent }   from './nav';
-import { SessionService } from '../services/session';
-import { User }           from '../classes/user';
-import { UserService }    from '../services/user';
+import { Capture }           from '../classes/capture';
+import { CaptureService }    from '../services/capture';
+import { DexComponent }      from './dex';
+import { InfoComponent }     from './info';
+import { NavComponent }      from './nav';
+import { NotFoundComponent } from './not-found';
+import { SessionService }    from '../services/session';
+import { User }              from '../classes/user';
+import { UserService }       from '../services/user';
 
 const HTML = require('../views/tracker.html');
 
 @Component({
-  directives: [DexComponent, InfoComponent, NavComponent],
+  directives: [DexComponent, InfoComponent, NavComponent, NotFoundComponent],
   providers: [CaptureService, SessionService, Title, UserService],
   selector: 'tracker',
   template: HTML
@@ -53,7 +54,8 @@ export class TrackerComponent implements OnInit {
       this.captures = captures;
       this.active = captures[0];
       this.loading = false;
-    });
+    })
+    .catch((err) => this.loading = false);
   }
 
 }

app/views/tracker.html

@@ -1,5 +1,6 @@
-<nav [user]="_session.user"></nav>
-<div class="tracker">
+<nav *ngIf="!loading && user" [user]="_session.user"></nav>
+<div *ngIf="!loading && user" class="tracker">
   <dex *ngIf="!loading" (activeChange)="active = $event" [captures]="captures" [user]="user"></dex>
   <info [active]="active"></info>
 </div>
+<not-found *ngIf="!loading && !user"></not-found>