chore(start): updated ng2 0.44

Author: valorkin

package.json

@@ -34,19 +34,19 @@
   },
   "devDependencies": {
     "css-loader": "0.20.1",
-    "xtend": "4.0.0",
-    "loader-utils": "0.2.11",
     "exports-loader": "0.6.2",
     "expose-loader": "0.7.0",
     "file-loader": "0.8.4",
     "html-webpack-plugin": "1.6.2",
     "imports-loader": "0.6.5",
     "json-loader": "0.5.3",
+    "loader-utils": "0.2.11",
     "style-loader": "0.12.4",
+    "ts-loader": "0.5.6",
     "typescript": "1.6.2",
-    "typescript-simple-loader": "0.3.8",
     "url-loader": "0.5.6",
     "webpack": "1.12.2",
-    "webpack-dev-server": "1.12.1"
+    "webpack-dev-server": "1.12.1",
+    "xtend": "4.0.0"
   }
 }

src/app/LoggedInOutlet.ts

@@ -1,28 +1,30 @@
 import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
-import {Router, RouterOutlet} from 'angular2/router';
-import {Injector} from 'angular2/di';
+import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
 import {Login} from '../login/login';
 
 @Directive({
   selector: 'router-outlet'
 })
 export class LoggedInRouterOutlet extends RouterOutlet {
-  publicRoutes: any
-  constructor(public _elementRef: ElementRef, public _loader: DynamicComponentLoader,
-              public _parentRouter: Router, @Attribute('name') nameAttr: string) {
-      super(_elementRef, _loader, _parentRouter, nameAttr);
+  publicRoutes:any;
+  private parentRouter:Router;
 
-      this.publicRoutes = {
-        '/login': true,
-        '/signup': true
-      };
+  constructor(_elementRef:ElementRef, _loader:DynamicComponentLoader,
+              _parentRouter:Router, @Attribute('name') nameAttr:string) {
+    super(_elementRef, _loader, _parentRouter, nameAttr);
 
+    this.parentRouter = _parentRouter;
+    this.publicRoutes = {
+      '/login': true,
+      '/signup': true
+    };
   }
 
-  activate(instruction) {
-    var url = this._parentRouter.lastNavigationAttempt;
+  activate(instruction: ComponentInstruction) {
+    var url = this.parentRouter.lastNavigationAttempt;
     if (!this.publicRoutes[url] && !localStorage.getItem('jwt')) {
-      instruction.component = Login;
+      // todo: redirect to Login
+      //instruction.component = Login;
     }
     return super.activate(instruction);
   }

src/app/app.ts

@@ -1,7 +1,6 @@
-/// <reference path="../../typings/tsd.d.ts" />
-
 import {View, Component} from 'angular2/angular2';
 import {Location, RouteConfig, RouterLink, Router} from 'angular2/router';
+
 import {LoggedInRouterOutlet} from './LoggedInOutlet';
 import {Home} from '../home/home';
 import {Login} from '../login/login';
@@ -19,9 +18,9 @@ let template = require('./app.html');
 })
 @RouteConfig([
   { path: '/',       redirectTo: '/home' },
-  { path: '/home',   as: 'home',   component: Home },
-  { path: '/login',  as: 'login',  component: Login },
-  { path: '/signup', as: 'signup', component: Signup }
+  { path: '/home',   as: 'Home',   component: Home },
+  { path: '/login',  as: 'Login',  component: Login },
+  { path: '/signup', as: 'Signup', component: Signup }
 ])
 export class App {
   constructor(public router: Router) {

src/home/home.ts

@@ -1,36 +1,34 @@
-/// <reference path="../../typings/tsd.d.ts" />
+import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+import { Router } from 'angular2/router';
 
-import {Component, View} from 'angular2/angular2';
-import {coreDirectives} from 'angular2/directives';
 import {status, text} from '../utils/fetch'
-import { Router} from 'angular2/router';
 
-let styles   = require('./home.css');
+let styles = require('./home.css');
 let template = require('./home.html');
 
 
 @Component({
   selector: 'home'
 })
 @View({
-  styles: [ styles ],
+  directives: [CORE_DIRECTIVES],
   template: template,
-  directives: [ coreDirectives ]
+  styles: [styles]
 })
 export class Home {
-  jwt: string;
-  decodedJwt: string;
-  response: string;
-  api: string;
+  jwt:string;
+  decodedJwt:string;
+  response:string;
+  api:string;
 
-  constructor(public router: Router) {
+  constructor(public router:Router) {
     this.jwt = localStorage.getItem('jwt');
     this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);
   }
 
   logout() {
     localStorage.removeItem('jwt');
-    this.router.parent.navigate('/login');
+    this.router.parent.navigate(['/login']);
   }
 
   callAnonymousApi() {
@@ -40,25 +38,25 @@ export class Home {
   callSecuredApi() {
     this._callApi('Secured', 'http://localhost:3001/api/protected/random-quote');
   }
+
   _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
-      }
-    })
-    .then(status)
-    .then(text)
-    .then((response) => {
-      this.response = response;
-    })
-    .catch((error) => {
-      this.response = error.message;
-    });
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'Authorization': 'bearer ' + this.jwt
+        }
+      })
+      .then(status)
+      .then(text)
+      .then((response) => {
+        this.response = response;
+      })
+      .catch((error) => {
+        this.response = error.message;
+      });
   }
-
 }

src/index.ts

@@ -1,18 +1,14 @@
-/// <reference path="../typings/tsd.d.ts" />
-
-import { bootstrap } from 'angular2/angular2';
-import { bind } from 'angular2/di';
-import { routerInjectables } from 'angular2/router';
-import { formInjectables } from 'angular2/forms';
-import { httpInjectables } from 'angular2/http';
+import { bootstrap, FORM_PROVIDERS } from 'angular2/angular2';
+import { ROUTER_PROVIDERS } from 'angular2/router';
+import { HTTP_PROVIDERS } from 'angular2/http';
 
 import { App } from './app/app';
 
 bootstrap(
   App,
   [
-    formInjectables,
-    routerInjectables,
-    httpInjectables
+    FORM_PROVIDERS,
+    ROUTER_PROVIDERS,
+    HTTP_PROVIDERS
   ]
 );

src/login/login.ts

@@ -1,21 +1,17 @@
-/// <reference path="../../typings/tsd.d.ts" />
-
 import {Component, View} from 'angular2/angular2';
-import {status, json} from '../utils/fetch'
 import { Router, RouterLink } from 'angular2/router';
-
+import {status, json} from '../utils/fetch'
 
 let styles   = require('./login.css');
 let template = require('./login.html');
 
-
 @Component({
   selector: 'login'
 })
 @View({
-  styles: [ styles ],
+  directives: [RouterLink],
   template: template,
-  directives: [RouterLink]
+  styles: [ styles ]
 })
 export class Login {
   constructor(public router: Router) {
@@ -37,7 +33,7 @@ export class Login {
     .then(json)
     .then((response) => {
       localStorage.setItem('jwt', response.id_token);
-      this.router.parent.navigate('/home');
+      this.router.parent.navigate(['/home']);
     })
     .catch((error) => {
       alert(error.message);
@@ -47,6 +43,6 @@ export class Login {
 
   signup(event) {
     event.preventDefault();
-    this.router.parent.navigate('/signup');
+    this.router.parent.navigate(['/signup']);
   }
 }

src/signup/signup.ts

@@ -1,7 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
-
-import {coreDirectives} from 'angular2/directives';
-import {Component, View} from 'angular2/angular2';
+import {CORE_DIRECTIVES, Component, View} from 'angular2/angular2';
 import {status, json} from '../utils/fetch';
 import { Router, RouterLink } from 'angular2/router';
 
@@ -12,9 +9,9 @@ let template = require('./signup.html');
   selector: 'signup'
 })
 @View({
-  directives: [ RouterLink, coreDirectives ],
-  styles: [ styles ],
-  template: template
+  directives: [ RouterLink, CORE_DIRECTIVES ],
+  template: template,
+  styles: [ styles ]
 })
 export class Signup {
   constructor(public router: Router) {
@@ -36,7 +33,7 @@ export class Signup {
     .then(json)
     .then((response) => {
       localStorage.setItem('jwt', response.id_token);
-      this.router.navigate('/home');
+      this.router.navigate(['/home']);
     })
     .catch((error) => {
       alert(error.message);
@@ -46,7 +43,7 @@ export class Signup {
 
   login(event) {
     event.preventDefault();
-    this.router.parent.navigate('/login');
+    this.router.parent.navigate(['/login']);
   }
 
 }

tsconfig.json

@@ -3,20 +3,20 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
-    "declaration": false,
+    "declaration": true,
     "noImplicitAny": false,
-    "removeComments": true,
+    "removeComments": false,
     "noLib": false,
     "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
     "sourceMap": true,
     "listFiles": true,
     "outDir": "dist"
   },
+  "exclude": [
+    "node_modules"
+  ],
   "files": [
-    "node_modules/typescript/bin/dom.d.ts",
-    "src/custom_typings/ng2.d.ts",
-    "typings/tsd.d.ts",
-    "src/components/app.ts",
-    "src/bootstrap.ts"
+    "src/index.ts"
   ]
 }

tsd.json

@@ -1,4 +1,3 @@
 /// <reference path="browser.d.ts" />
-/// <reference path="ng2.d.ts" />
 /// <reference path="webpack.d.ts" />
 /// <reference path="jwt_decode.d.ts" />