Update to Angular 2.0.0-alpha.31...Swapped out fetch with Http. Also updated typings to be easier to work with and update

package.json

@@ -21,10 +21,10 @@
   },
   "homepage": "https://github.com/auth0/angular2-authentication-sample",
   "dependencies": {
-    "angular2": "2.0.0-alpha.30",
+    "angular2": "2.0.0-alpha.31",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "^0.1.0",
-    "rtts_assert": "2.0.0-alpha.29",
+    "rtts_assert": "2.0.0-alpha.31",
     "rx": "^2.5.3",
     "zone.js": "^0.5.0",
     "bootstrap": "~3.3.4",

src/app/LoggedInOutlet.ts

@@ -1,6 +1,6 @@
-import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
+/// <reference path="../typings/custom.d.ts" />
+import {Directive, Attribute, ElementRef, DynamicComponentLoader, Injector} from 'angular2/angular2';
 import {Router, RouterOutlet} from 'angular2/router';
-import {Injector} from 'angular2/di';
 import {Login} from '../login/login';
 
 @Directive({
@@ -19,11 +19,11 @@ export class LoggedInRouterOutlet extends RouterOutlet {
 
   }
 
-  activate(instruction) {
+  commit(instruction) {
     var url = this._parentRouter.lastNavigationAttempt;
     if (!this.publicRoutes[url] && !localStorage.getItem('jwt')) {
       instruction.component = Login;
     }
-    return super.activate(instruction);
+    return super.commit(instruction);
   }
 }

src/common/BrowserDomAdapter.ts

@@ -1,3 +1,3 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
 BrowserDomAdapter.makeCurrent();

src/common/jitInjectables.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 import {ChangeDetection, JitChangeDetection} from 'angular2/change_detection';
 import {bind} from 'angular2/di';
 

src/home/home.ts

@@ -1,8 +1,7 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
-import {Component, View} from 'angular2/angular2';
-import {coreDirectives} from 'angular2/directives';
-import {status, text} from '../utils/fetch'
+import {Component, View, coreDirectives, Http, Headers} from 'angular2/angular2';
+import {status, text} from '../utils/fetch';
 import { Router} from 'angular2/router';
 
 let styles   = require('./home.css');
@@ -23,7 +22,7 @@ export class Home {
   response: string;
   api: string;
 
-  constructor(public router: Router) {
+  constructor(public router: Router, public http: Http) {
     this.jwt = localStorage.getItem('jwt');
     this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);
   }
@@ -43,22 +42,22 @@ export class Home {
   _callApi(type, url) {
     this.response = null;
     this.api = type;
-    window.fetch(url, {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-        'Authorization': 'bearer ' + this.jwt
+    var headers = new Headers();
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    headers.append('Authorization', 'bearer ' + this.jwt);
+    this.http.get(url, {headers: headers})
+    .toRx()
+    .map(status)
+    .map(text)
+    .subscribe(
+      response => {
+          this.response = response;
+      },
+      error => {
+          this.response = error.message;
       }
-    })
-    .then(status)
-    .then(text)
-    .then((response) => {
-      this.response = response;
-    })
-    .catch((error) => {
-      this.response = error.message;
-    });
+    )
   }
 
 }

src/index.ts

@@ -1,10 +1,7 @@
-/// <reference path="../typings/tsd.d.ts" />
+/// <reference path="typings/custom.d.ts" />
 
-import { bootstrap } from 'angular2/angular2';
-import { bind } from 'angular2/di';
+import { bootstrap, bind, formInjectables, httpInjectables } from 'angular2/angular2';
 import { routerInjectables } from 'angular2/router';
-import { formInjectables } from 'angular2/forms';
-import { httpInjectables } from 'angular2/http';
 
 import { App } from './app/app';
 

src/login/login.ts

@@ -1,7 +1,7 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
-import {Component, View} from 'angular2/angular2';
-import {status, json} from '../utils/fetch'
+import {Component, View, Http, Headers} from 'angular2/angular2';
+import {status, json} from '../utils/fetch';
 import { Router, RouterLink } from 'angular2/router';
 
 
@@ -18,31 +18,35 @@ let template = require('./login.html');
   directives: [RouterLink]
 })
 export class Login {
-  constructor(public router: Router) {
+  constructor(public router: Router, public http: Http) {
   }
 
   login(event, username, password) {
     event.preventDefault();
-    window.fetch('http://localhost:3001/sessions/create', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
+    var headers = new Headers();
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    this.http.post('http://localhost:3001/sessions/create',
+      JSON.stringify({
         username, password
-      })
-    })
-    .then(status)
-    .then(json)
-    .then((response) => {
-      localStorage.setItem('jwt', response.id_token);
-      this.router.parent.navigate('/home');
-    })
-    .catch((error) => {
-      alert(error.message);
-      console.log(error.message);
-    });
+      }),
+      { 
+        headers: headers
+      }
+    )
+    .toRx()
+    .map(status)
+    .map(json)
+    .subscribe(
+      response => {
+        localStorage.setItem('jwt', response.id_token);
+        this.router.parent.navigate('/home');
+      },
+      error => {
+        alert(error.message);
+        console.log(error.message);
+      }
+    );
   }
 
   signup(event) {

src/signup/signup.ts

@@ -1,7 +1,6 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
-import {coreDirectives} from 'angular2/directives';
-import {Component, View} from 'angular2/angular2';
+import {Component, View, coreDirectives, Http, Headers} from 'angular2/angular2';
 import {status, json} from '../utils/fetch';
 import { Router, RouterLink } from 'angular2/router';
 
@@ -17,31 +16,35 @@ let template = require('./signup.html');
   template: template
 })
 export class Signup {
-  constructor(public router: Router) {
+  constructor(public router: Router, public http: Http) {
   }
 
   signup(event, username, password) {
     event.preventDefault();
-    window.fetch('http://localhost:3001/users', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
+    var headers = new Headers();
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    this.http.post('http://localhost:3001/users',
+      JSON.stringify({
         username, password
-      })
-    })
-    .then(status)
-    .then(json)
-    .then((response) => {
-      localStorage.setItem('jwt', response.id_token);
-      this.router.navigate('/home');
-    })
-    .catch((error) => {
-      alert(error.message);
-      console.log(error.message);
-    });
+      }),
+      {
+        headers: headers
+      }
+    )
+    .toRx()
+    .map(status)
+    .map(json)
+    .subscribe(
+      response => {
+        localStorage.setItem('jwt', response.id_token);
+        this.router.navigate('/home');
+      },
+      error => {
+        alert(error.message);
+        console.log(error.message);
+      }
+    );
   }
 
   login(event) {

src/typings/browser.d.ts

@@ -0,0 +1,95 @@
+interface ObjectConstructor {
+    assign(target: any, ...sources: any[]): any;
+    observe(target: any, callback: Function, acceptList?: Array<any>): void;
+}
+
+declare module "angular2/src/dom/browser_adapter" {
+  class BrowserDomAdapter {
+    static makeCurrent(): void;
+    logError(error: any): void;
+    attrToPropMap: any;
+    query(selector: string): any;
+    querySelector(el: any, selector: string): Node;
+    querySelectorAll(el: any, selector: string): List<any>;
+    on(el: any, evt: any, listener: any): void;
+    onAndCancel(el: any, evt: any, listener: any): Function;
+    dispatchEvent(el: any, evt: any): void;
+    createMouseEvent(eventType: string): MouseEvent;
+    createEvent(eventType: any): Event;
+    getInnerHTML(el: any): any;
+    getOuterHTML(el: any): any;
+    nodeName(node: Node): string;
+    nodeValue(node: Node): string;
+    type(node: HTMLInputElement): string;
+    content(node: Node): Node;
+    firstChild(el: any): Node;
+    nextSibling(el: any): Node;
+    parentElement(el: any): any;
+    childNodes(el: any): List<Node>;
+    childNodesAsList(el: any): List<any>;
+    clearNodes(el: any): void;
+    appendChild(el: any, node: any): void;
+    removeChild(el: any, node: any): void;
+    replaceChild(el: Node, newChild: any, oldChild: any): void;
+    remove(el: any): any;
+    insertBefore(el: any, node: any): void;
+    insertAllBefore(el: any, nodes: any): void;
+    insertAfter(el: any, node: any): void;
+    setInnerHTML(el: any, value: any): void;
+    getText(el: any): any;
+    setText(el: any, value: string): void;
+    getValue(el: any): any;
+    setValue(el: any, value: string): void;
+    getChecked(el: any): any;
+    setChecked(el: any, value: boolean): void;
+    createTemplate(html: any): HTMLElement;
+    createElement(tagName: any, doc?: Document): HTMLElement;
+    createTextNode(text: string, doc?: Document): Text;
+    createScriptTag(attrName: string, attrValue: string, doc?: Document): HTMLScriptElement;
+    createStyleElement(css: string, doc?: Document): HTMLStyleElement;
+    createShadowRoot(el: HTMLElement): DocumentFragment;
+    getShadowRoot(el: HTMLElement): DocumentFragment;
+    getHost(el: HTMLElement): HTMLElement;
+    clone(node: Node): Node;
+    hasProperty(element: any, name: string): boolean;
+    getElementsByClassName(element: any, name: string): any;
+    getElementsByTagName(element: any, name: string): any;
+    classList(element: any): List<any>;
+    addClass(element: any, classname: string): void;
+    removeClass(element: any, classname: string): void;
+    hasClass(element: any, classname: string): any;
+    setStyle(element: any, stylename: string, stylevalue: string): void;
+    removeStyle(element: any, stylename: string): void;
+    getStyle(element: any, stylename: string): any;
+    tagName(element: any): string;
+    attributeMap(element: any): any;
+    hasAttribute(element: any, attribute: string): any;
+    getAttribute(element: any, attribute: string): any;
+    setAttribute(element: any, name: string, value: string): void;
+    removeAttribute(element: any, attribute: string): any;
+    templateAwareRoot(el: any): any;
+    createHtmlDocument(): Document;
+    defaultDoc(): Document;
+    getBoundingClientRect(el: any): any;
+    getTitle(): string;
+    setTitle(newTitle: string): void;
+    elementMatches(n: any, selector: string): boolean;
+    isTemplateElement(el: any): boolean;
+    isTextNode(node: Node): boolean;
+    isCommentNode(node: Node): boolean;
+    isElementNode(node: Node): boolean;
+    hasShadowRoot(node: any): boolean;
+    isShadowRoot(node: any): boolean;
+    importIntoDoc(node: Node): Node;
+    isPageRule(rule: any): boolean;
+    isStyleRule(rule: any): boolean;
+    isMediaRule(rule: any): boolean;
+    isKeyframesRule(rule: any): boolean;
+    getHref(el: Element): string;
+    getEventKey(event: any): string;
+    getGlobalEventTarget(target: string): EventTarget;
+    getHistory(): History;
+    getLocation(): Location;
+    getBaseHref(): any;
+  }
+}

typings/_custom/custom.d.ts → src/typings/custom.d.ts

@@ -1,4 +1,11 @@
+/*
+ * Our custom types
+ */
 /// <reference path="browser.d.ts" />
-/// <reference path="ng2.d.ts" />
 /// <reference path="webpack.d.ts" />
 /// <reference path="jwt_decode.d.ts" />
+
+/*
+ * tsd generated types
+ */
+/// <reference path="../../typings/tsd.d.ts" />

src/utils/fetch.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
 export function status(response) {
   if (response.status >= 200 && response.status < 300) {

tsd.json

@@ -6,7 +6,10 @@
   "bundle": "typings/tsd.d.ts",
   "installed": {
     "angular2/angular2.d.ts": {
-      "commit": "2a5858c16563634453533009242b8e0b18521370"
+      "commit": "212793c4be051977f73675fa9bb125d891df037a"
+    },
+    "angular2/router.d.ts": {
+      "commit": "212793c4be051977f73675fa9bb125d891df037a"
     },
     "rx/rx.d.ts": {
       "commit": "8c7444882a2bc2ab87387f8f736a7d97e89b9c90"