Initial commit.

src/app/about/about.component.ts

@@ -0,0 +1,55 @@
+import {Component} from 'angular2/core';
+
+/*
+ * We're loading this component asynchronously
+ * We are using some magic with es6-promise-loader that will wrap the module with a Promise
+ * see https://github.com/gdi2290/es6-promise-loader for more info
+ */
+
+console.log('`About` component loaded asynchronously');
+
+@Component({
+  selector: 'about',
+  styles: [`
+    h1 {
+      font-family: Arial, Helvetica, sans-serif
+    }
+  `],
+  template: `
+  <md-card>
+    <h1>
+      patrick@AngularClass.com
+    </h1>
+  </md-card>
+
+  `
+})
+export class About {
+  constructor() {
+
+  }
+
+  ngOnInit() {
+    console.log('hello `About` component');
+    // static data that is bundled
+    // var mockData = require('assets/mock-data/mock-data.json');
+    // console.log('mockData', mockData);
+    // if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
+    // this.asyncDataWithWebpack();
+  }
+  asyncDataWithWebpack() {
+    // you can also async load mock data with 'es6-promise-loader'
+    // you would do this if you don't want the mock-data bundled
+    // remember that 'es6-promise-loader' is a promise
+    // var asyncMockDataPromiseFactory = require('es6-promise!assets/mock-data/mock-data.json');
+    // setTimeout(() => {
+    //
+    //   let asyncDataPromise = asyncMockDataPromiseFactory();
+    //   asyncDataPromise.then(json => {
+    //     console.log('async mockData', json);
+    //   });
+    //
+    // });
+  }
+
+}

src/app/about/about.spec.ts

@@ -0,0 +1,29 @@
+import {
+  it,
+  inject,
+  injectAsync,
+  describe,
+  beforeEachProviders,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+import {Component, provide} from 'angular2/core';
+
+// Load the implementations that should be tested
+import {About} from './about.component';
+
+describe('About', () => {
+  // provide our implementations or mocks to the dependency injector
+  beforeEachProviders(() => [
+    About
+  ]);
+
+  it('should log ngOnInit', inject([ About ], (about) => {
+    spyOn(console, 'log');
+    expect(console.log).not.toHaveBeenCalled();
+
+    about.ngOnInit();
+    expect(console.log).toHaveBeenCalled();
+  }));
+
+});

src/app/about/index.ts

@@ -0,0 +1 @@
+export * from './about.component';

src/app/app.component.ts

@@ -0,0 +1,99 @@
+/*
+ * Angular 2 decorators and services
+ */
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {RouteConfig, Router} from 'angular2/router';
+
+import {Home} from './home';
+import {AppState} from './app.service';
+import {RouterActive} from './router-active';
+
+/*
+ * App Component
+ * Top Level Component
+ */
+@Component({
+  selector: 'app',
+  pipes: [ ],
+  providers: [ ],
+  directives: [ RouterActive ],
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    require('normalize.css'),
+    `
+    md-toolbar ul {
+      display: inline;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      width: 60px;
+    }
+    md-toolbar li {
+      display: inline;
+    }
+    md-toolbar li.active {
+      background-color: lightgray;
+    }
+  `],
+  template: `
+    <header>
+      <md-toolbar color="primary">
+        <span>{{ name }}</span>
+        <nav>
+          <ul>
+            <li router-active>
+              <a [routerLink]=" ['Index'] ">Index</a>
+            </li>
+            |
+            <li router-active>
+              <a [routerLink]=" ['Home'] ">Home</a>
+            </li>
+            |
+            <li router-active>
+              <a [routerLink]=" ['About'] ">About</a>
+            </li>
+          </ul>
+        </nav>
+      </md-toolbar>
+    </header>
+
+    <main>
+      <router-outlet></router-outlet>
+    </main>
+
+    <pre>this.appState.state = {{ appState.state | json }}</pre>
+
+    <footer>
+      WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a>
+      <div>
+        <img [src]="angularclassLogo" width="10%">
+      </div>
+    </footer>
+  `
+})
+@RouteConfig([
+  { path: '/',      name: 'Index', component: Home, useAsDefault: true },
+  { path: '/home',  name: 'Home',  component: Home },
+  // Async load a component using Webpack's require with es6-promise-loader and webpack `require`
+  { path: '/about', name: 'About', loader: () => require('es6-promise!./about')('About') }
+])
+export class App {
+  angularclassLogo = 'assets/img/angularclass-avatar.png';
+  name = 'Angular 2 Webpack Starter';
+  url = 'https://twitter.com/AngularClass';
+
+  constructor(public appState: AppState) {}
+
+  ngOnInit() {
+    console.log('Initial App State', this.appState.state);
+  }
+
+}
+
+/*
+ * Please review the https://github.com/AngularClass/angular2-examples/ repo for
+ * more angular app examples that you may copy/paste
+ * (The examples may not be updated as quickly. Please open an issue on github for us to update it)
+ * For help or questions please contact us at @AngularClass on twitter
+ * or our chat on Slack at https://AngularClass.com/slack-join
+ */

src/app/app.e2e.ts

@@ -0,0 +1,32 @@
+describe('App', () => {
+
+  beforeEach(() => {
+    browser.get('/');
+  });
+
+
+  it('should have a title', () => {
+    let subject = browser.getTitle();
+    let result  = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass';
+    expect(subject).toEqual(result);
+  });
+
+  it('should have <header>', () => {
+    let subject = element(by.css('app header')).isPresent();
+    let result  = true;
+    expect(subject).toEqual(result);
+  });
+
+  it('should have <main>', () => {
+    let subject = element(by.css('app main')).isPresent();
+    let result  = true;
+    expect(subject).toEqual(result);
+  });
+
+  it('should have <footer>', () => {
+    let subject = element(by.css('app footer')).getText();
+    let result  = 'WebPack Angular 2 Starter by @AngularClass';
+    expect(subject).toEqual(result);
+  });
+
+});

src/app/app.service.ts

@@ -0,0 +1,39 @@
+import {Injectable} from 'angular2/core';
+import {HmrState} from 'angular2-hmr';
+
+@Injectable()
+export class AppState {
+  // HmrState uis used by HMR to track the any state during reloading
+  @HmrState() _state = {};
+
+  constructor() {
+
+  }
+
+  // already return a clone of the current state
+  get state() {
+    return this._state = this._clone(this._state);
+  }
+  // never allow mutation
+  set state(value) {
+    throw new Error('do not mutate the `.state` directly');
+  }
+
+
+  get(prop?: any) {
+    // use our state getter for the clone
+    const state = this.state;
+    return state[prop] || state;
+  }
+
+  set(prop: string, value: any) {
+    // internally mutate our state
+    return this._state[prop] = value;
+  }
+
+
+  _clone(object) {
+    // simple object clone
+    return JSON.parse(JSON.stringify( object ));
+  }
+}

src/app/app.spec.ts

@@ -0,0 +1,24 @@
+import {
+  it,
+  inject,
+  injectAsync,
+  beforeEachProviders,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+// Load the implementations that should be tested
+import {App} from './app.component';
+import {AppState} from './app.service';
+
+describe('App', () => {
+  // provide our implementations or mocks to the dependency injector
+  beforeEachProviders(() => [
+    AppState,
+    App
+  ]);
+
+  it('should have a url', inject([ App ], (app) => {
+    expect(app.url).toEqual('https://twitter.com/AngularClass');
+  }));
+
+});

src/app/home/home.component.ts

@@ -0,0 +1,46 @@
+import {Component} from 'angular2/core';
+import {AppState} from '../app.service';
+
+import {Title} from './title';
+import {XLarge} from './x-large';
+
+@Component({
+  // The selector is what angular internally uses
+  // for `document.querySelectorAll(selector)` in our index.html
+  // where, in this case, selector is the string 'home'
+  selector: 'home',  // <home></home>
+  // We need to tell Angular's Dependency Injection which providers are in our app.
+  providers: [
+    Title
+  ],
+  // We need to tell Angular's compiler which directives are in our template.
+  // Doing so will allow Angular to attach our behavior to an element
+  directives: [
+    XLarge
+  ],
+  // We need to tell Angular's compiler which custom pipes are in our template.
+  pipes: [ ],
+  // Our list of styles in our component. We may add more to compose many styles together
+  styles: [ require('./home.css') ],
+  // Every Angular template is first compiled by the browser before Angular runs it's compiler
+  template: require('./home.html')
+})
+export class Home {
+  // Set our default values
+  localState = { value: '' };
+  // TypeScript public modifiers
+  constructor(public appState: AppState, public title: Title) {
+
+  }
+
+  ngOnInit() {
+    console.log('hello `Home` component');
+    // this.title.getData().subscribe(data => this.data = data);
+  }
+
+  submitState(value) {
+    console.log('submitState', value);
+    this.appState.set('value', value);
+  }
+
+}

src/app/home/home.e2e.ts

@@ -0,0 +1,22 @@
+describe('App', () => {
+
+  beforeEach(() => {
+    // change hash depending on router LocationStrategy
+    browser.get('/#/home');
+  });
+
+
+  it('should have a title', () => {
+    let subject = browser.getTitle();
+    let result  = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass';
+    expect(subject).toEqual(result);
+  });
+
+  it('should have `your content here` x-large', () => {
+    let subject = element(by.css('[x-large]')).getText();
+    let result  = 'Your Content Here';
+    expect(subject).toEqual(result);
+  });
+
+
+});

src/app/home/home.html

@@ -0,0 +1,31 @@
+<md-card>
+  <md-card-content>
+    <span x-large>Your Content Here</span>
+
+    <form (ngSubmit)="submitState(localState.value)" autocomplete="off">
+
+      <md-input
+        placeholder="Submit Local State to App State"
+        [value]="localState.value"
+        (input)="localState.value = $event.target.value"
+        autofocus>
+      </md-input>
+
+      <button md-raised-button color="primary">Submit Value</button>
+    </form>
+    <!--
+      <input type="text" [value]="localState.value" (input)="localState.value = $event.target.value" autofocus>
+      Rather than wiring up two-way data-binding ourselves with [value] and (input)
+      we can use Angular's [(ngModel)] syntax
+      <input type="text" [(ngModel)]="localState.value" autofocus>
+    -->
+    <md-card>
+      For hot module reloading run
+      <pre>npm run start:hmr</pre>
+    </md-card>
+
+    <hr>
+    <pre>this.localState = {{ localState | json }}</pre>
+
+  </md-card-content>
+</md-card>

src/app/home/home.spec.ts

@@ -0,0 +1,52 @@
+import {
+  it,
+  inject,
+  injectAsync,
+  describe,
+  beforeEachProviders,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+import {Component, provide} from 'angular2/core';
+import {BaseRequestOptions, Http} from 'angular2/http';
+import {MockBackend} from 'angular2/http/testing';
+
+// Load the implementations that should be tested
+import {Home} from './home.component';
+import {Title} from './title';
+import {AppState} from '../app.service';
+
+describe('Home', () => {
+  // provide our implementations or mocks to the dependency injector
+  beforeEachProviders(() => [
+    BaseRequestOptions,
+    MockBackend,
+    provide(Http, {
+      useFactory: function(backend, defaultOptions) {
+        return new Http(backend, defaultOptions);
+      },
+      deps: [MockBackend, BaseRequestOptions]
+    }),
+
+    AppState,
+    Title,
+    Home
+  ]);
+
+  it('should have default data', inject([ Home ], (home) => {
+    expect(home.localState).toEqual({ value: '' });
+  }));
+
+  it('should have a title', inject([ Home ], (home) => {
+    expect(!!home.title).toEqual(true);
+  }));
+
+  it('should log ngOnInit', inject([ Home ], (home) => {
+    spyOn(console, 'log');
+    expect(console.log).not.toHaveBeenCalled();
+
+    home.ngOnInit();
+    expect(console.log).toHaveBeenCalled();
+  }));
+
+});

src/app/home/index.ts

@@ -0,0 +1 @@
+export * from './home.component';

src/app/home/title/index.ts

@@ -0,0 +1 @@
+export * from './title.service';

src/app/home/title/title.service.ts

@@ -0,0 +1,20 @@
+import {Injectable} from 'angular2/core';
+import {Http} from 'angular2/http';
+
+@Injectable()
+export class Title {
+  value = 'Angular 2';
+  constructor(public http: Http) {
+
+  }
+
+  getData() {
+    console.log('Title#getData(): Get Data');
+    // return this.http.get('/assets/data.json')
+    // .map(res => res.json());
+    return {
+      value: 'AngularClass'
+    };
+  }
+
+}

src/app/home/title/title.spec.ts

@@ -0,0 +1,44 @@
+import {
+  it,
+  inject,
+  injectAsync,
+  beforeEachProviders,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+import {Component, provide} from 'angular2/core';
+import {BaseRequestOptions, Http} from 'angular2/http';
+import {MockBackend} from 'angular2/http/testing';
+
+
+import {Title} from './title.service';
+
+describe('Title', () => {
+  beforeEachProviders(() => [
+    BaseRequestOptions,
+    MockBackend,
+    provide(Http, {
+      useFactory: function(backend, defaultOptions) {
+        return new Http(backend, defaultOptions);
+      },
+      deps: [MockBackend, BaseRequestOptions]
+    }),
+
+    Title
+  ]);
+
+
+  it('should have http', inject([ Title ], (title) => {
+    expect(!!title.http).toEqual(true);
+  }));
+
+  it('should get data from the server', inject([ Title ], (title) => {
+    spyOn(console, 'log');
+    expect(console.log).not.toHaveBeenCalled();
+
+    title.getData();
+    expect(console.log).toHaveBeenCalled();
+    expect(title.getData()).toEqual({ value: 'AngularClass' });
+  }));
+
+});

src/app/home/x-large/index.ts

@@ -0,0 +1 @@
+export * from './x-large.directive';

src/app/home/x-large/x-large.directive.ts

@@ -0,0 +1,18 @@
+import {Directive, Component, ElementRef, Renderer} from 'angular2/core';
+/*
+ * Directive
+ * XLarge is a simple directive to show how one is made
+ */
+@Directive({
+  selector: '[x-large]' // using [ ] means selecting attributes
+})
+export class XLarge {
+  constructor(element: ElementRef, renderer: Renderer) {
+    // simple DOM manipulation to set font size to x-large
+    // `nativeElement` is the direct reference to the DOM element
+    // element.nativeElement.style.fontSize = 'x-large';
+
+    // for server/webworker support use the renderer
+    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
+  }
+}

src/app/home/x-large/x-large.spec.ts

@@ -0,0 +1,34 @@
+import {
+  it,
+  inject,
+  injectAsync,
+  describe,
+  beforeEachProviders,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+import {Component, provide} from 'angular2/core';
+import {BaseRequestOptions, Http} from 'angular2/http';
+import {MockBackend} from 'angular2/http/testing';
+
+// Load the implementations that should be tested
+import {XLarge} from './x-large.directive';
+
+describe('x-large directive', () => {
+  // Create a test component to test directives
+  @Component({
+    template: '',
+    directives: [ XLarge ]
+  })
+  class TestComponent {}
+
+  it('should sent font-size to x-large', injectAsync([TestComponentBuilder], (tcb) => {
+    return tcb.overrideTemplate(TestComponent, '<div x-large>Content</div>')
+      .createAsync(TestComponent).then((fixture: any) => {
+        fixture.detectChanges();
+        let compiled = fixture.debugElement.nativeElement.children[0];
+        expect(compiled.style.fontSize).toBe('x-large');
+      });
+  }));
+
+});

src/app/index.ts

@@ -0,0 +1,10 @@
+// App
+export * from './app.component';
+export * from './app.service';
+
+import {AppState} from './app.service';
+
+// Application wide providers
+export const APP_PROVIDERS = [
+  AppState
+];

src/app/router-active/index.ts

@@ -0,0 +1,2 @@
+// Application level directive
+export * from './router-active.directive';

src/app/router-active/router-active.directive.ts

@@ -0,0 +1,73 @@
+import {Router} from 'angular2/router';
+import {isPresent} from 'angular2/src/facade/lang';
+import {
+  Directive,
+  Query,
+  QueryList,
+  Attribute,
+  ElementRef,
+  Renderer,
+  Optional,
+  Input
+} from 'angular2/core';
+import {Instruction, RouterLink} from 'angular2/router';
+
+/**
+ * RouterActive dynamically finds the first element with routerLink and toggles the active class
+ *
+ * ## Use
+ *
+ * ```
+ * <li router-active="active"><a [routerLink]=" ['/Home'] ">Home</a></li>
+ * <li [routerActive]=" activeStringValue "><a [routerLink]=" ['/Home'] ">Home</a></li>
+ * ```
+ */
+@Directive({
+  selector: '[router-active]'
+})
+export class RouterActive {
+  @Input() routerActive: string = undefined;
+  routerActiveAttr: string = 'active';
+
+  constructor(
+    public router: Router,
+    public element: ElementRef,
+    public renderer: Renderer,
+    @Query(RouterLink) public routerLink: QueryList<RouterLink>,
+    @Optional() @Attribute('router-active') routerActiveAttr?: string) {
+
+      this.routerActiveAttr = this._defaultAttrValue(routerActiveAttr);
+  }
+
+  ngOnInit() {
+    this.routerLink.changes.subscribe(() => {
+      if (this.routerLink.first) {
+        this._updateClass();
+        this._findRootRouter().subscribe(() => {
+          this._updateClass();
+        });
+      }
+    });
+  }
+
+  private _findRootRouter(): Router {
+    let router: Router = this.router;
+    while (isPresent(router.parent)) {
+      router = router.parent;
+    }
+    return router;
+  }
+
+  private _updateClass() {
+    let active = this.routerLink.first.isRouteActive;
+    this.renderer.setElementClass(this.element.nativeElement, this._attrOrProp(), active);
+  }
+
+  private _defaultAttrValue(attr?: string) {
+    return this.routerActiveAttr = attr || this.routerActiveAttr;
+  }
+
+  private _attrOrProp() {
+    return isPresent(this.routerActive) ? this.routerActive : this.routerActiveAttr;
+  }
+}

src/assets/css/.gitkeep

@@ -0,0 +1 @@
+@AngularClass

src/assets/data.json

@@ -0,0 +1,3 @@
+{
+  "value": "AngularClass"
+}

src/assets/humans.txt

@@ -0,0 +1,17 @@
+# humanstxt.org/
+# The humans responsible & technology colophon
+
+# TEAM
+
+  <name> -- <role> -- <twitter>
+
+# THANKS
+
+  <name>
+  PatrickJS -- @gdi2290
+  AngularClass -- @AngularClass
+
+# TECHNOLOGY COLOPHON
+
+  HTML5, CSS3
+  Angular2, TypeScript, Webpack

src/assets/icon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/assets/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "/assets/icon/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image/png",
+   "density": 0.75
+  },
+  {
+   "src": "/assets/icon/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image/png",
+   "density": 1.0
+  },
+  {
+   "src": "/assets/icon/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image/png",
+   "density": 1.5
+  },
+  {
+   "src": "/assets/icon/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image/png",
+   "density": 2.0
+  },
+  {
+   "src": "/assets/icon/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image/png",
+   "density": 3.0
+  },
+  {
+   "src": "/assets/icon/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image/png",
+   "density": 4.0
+  }
+ ]
+}

src/assets/mock-data/mock-data.json

@@ -0,0 +1,3 @@
+[
+  {"res": "data"}
+]

src/assets/robots.txt

@@ -0,0 +1,3 @@
+# robotstxt.org
+
+User-agent: *

src/assets/service-worker.js

@@ -0,0 +1 @@
+// This file is intentionally without code.

src/custom-typings.d.ts

@@ -0,0 +1,119 @@
+/*
+ * Custom Type Definitions
+ * When including 3rd party modules you also need to include the type definition for the module
+ * if they don't provide one within the module. You can try to install it with typings
+
+typings install node --save
+
+ * If you can't find the type definition in the registry we can make an ambient definition in
+ * this file for now. For example
+
+declare module "my-module" {
+  export function doesSomething(value: string): string;
+}
+
+ *
+ * If you're prototying and you will fix the types later you can also declare it as type any
+ *
+
+declare var assert: any;
+
+ *
+ * If you're importing a module that uses Node.js modules which are CommonJS you need to import as
+ *
+
+import * as _ from 'lodash'
+
+ * You can include your type definitions in this file until you create one for the typings registry
+ * see https://github.com/typings/registry
+ *
+ */
+
+
+// Extra variables that live on Global that will be replaced by webpack DefinePlugin
+declare var ENV: string;
+declare var HMR: boolean;
+interface GlobalEnvironment {
+  ENV;
+  HMR;
+}
+
+interface WebpackModule {
+  hot: {
+    data?: any,
+    idle: any,
+    accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
+    decline(dependencies?: string | string[]): void;
+    dispose(callback?: (data?: any) => void): void;
+    addDisposeHandler(callback?: (data?: any) => void): void;
+    removeDisposeHandler(callback?: (data?: any) => void): void;
+    check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
+    apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
+    status(callback?: (status?: string) => void): void | string;
+    removeStatusHandler(callback?: (status?: string) => void): void;
+  };
+}
+
+interface WebpackRequire {
+  context(file: string, flag?: boolean, exp?: RegExp): any;
+}
+
+
+interface ErrorStackTraceLimit {
+  stackTraceLimit: number;
+}
+
+
+
+// Extend typings
+interface NodeRequire extends WebpackRequire {}
+interface ErrorConstructor extends ErrorStackTraceLimit {}
+interface NodeModule extends WebpackModule {}
+interface Global extends GlobalEnvironment  {}
+
+
+declare namespace Reflect {
+  function decorate(decorators: ClassDecorator[], target: Function): Function;
+  function decorate(
+    decorators: (PropertyDecorator | MethodDecorator)[],
+    target: Object,
+    targetKey: string | symbol,
+    descriptor?: PropertyDescriptor): PropertyDescriptor;
+
+  function metadata(metadataKey: any, metadataValue: any): {
+    (target: Function): void;
+    (target: Object, propertyKey: string | symbol): void;
+  };
+  function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
+  function defineMetadata(
+    metadataKey: any,
+    metadataValue: any,
+    target: Object,
+    targetKey: string | symbol): void;
+  function hasMetadata(metadataKey: any, target: Object): boolean;
+  function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
+  function hasOwnMetadata(metadataKey: any, target: Object): boolean;
+  function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
+  function getMetadata(metadataKey: any, target: Object): any;
+  function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
+  function getOwnMetadata(metadataKey: any, target: Object): any;
+  function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
+  function getMetadataKeys(target: Object): any[];
+  function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
+  function getOwnMetadataKeys(target: Object): any[];
+  function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
+  function deleteMetadata(metadataKey: any, target: Object): boolean;
+  function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
+}
+
+
+// We need this here since there is a problem with Zone.js typings
+interface Thenable<T> {
+  then<U>(
+    onFulfilled?: (value: T) => U | Thenable<U>,
+    onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
+  then<U>(
+    onFulfilled?: (value: T) => U | Thenable<U>,
+    onRejected?: (error: any) => void): Thenable<U>;
+  catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
+}

src/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+
+  <title><%= webpackConfig.metadata.title %></title>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="<%= webpackConfig.metadata.title %>">
+
+  <!-- use http://www.favicon-generator.org/ to replace files in public/icon-->
+  <link rel="apple-touch-icon" sizes="57x57" href="/assets/icon/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/assets/icon/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/assets/icon/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/assets/icon/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/assets/icon/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/assets/icon/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/assets/icon/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/assets/icon/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="/assets/icon/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/icon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/assets/icon/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/icon/favicon-16x16.png">
+  <link rel="manifest" href="/assets/manifest.json">
+  <meta name="msapplication-TileColor" content="#00bcd4">
+  <meta name="msapplication-TileImage" content="/assets/icon/ms-icon-144x144.png">
+  <meta name="theme-color" content="#00bcd4">
+  <!-- end favicon -->
+
+  <!-- base url -->
+  <base href="<%= webpackConfig.metadata.baseUrl %>">
+
+
+</head>
+
+<body>
+
+  <app>
+    Loading...
+  </app>
+
+  <!-- Google Analytics: change UA-71073175-1 to be your site's ID -->
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-71073175-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+
+  <% if (webpackConfig.metadata.ENV === 'development') { %>
+  <!-- Webpack Dev Server reload -->
+  <script src="/webpack-dev-server.js"></script>
+  <% } %>
+  
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+</body>
+</html>

src/main.browser.ts

@@ -0,0 +1,58 @@
+/*
+ * Providers provided by Angular
+ */
+import {bootstrap} from 'angular2/platform/browser';
+/*
+* Platform and Environment
+* our providers/directives/pipes
+*/
+import {DIRECTIVES, PIPES, PROVIDERS} from './platform/browser';
+import {ENV_PROVIDERS} from './platform/environment';
+
+/*
+* App Component
+* our top level component that holds all of our components
+*/
+import {App, APP_PROVIDERS} from './app';
+
+/*
+ * Bootstrap our Angular app with a top level component `App` and inject
+ * our Services and Providers into Angular's dependency injection
+ */
+export function main(initialHmrState?: any): Promise<any> {
+
+  return bootstrap(App, [
+    ...PROVIDERS,
+    ...ENV_PROVIDERS,
+    ...DIRECTIVES,
+    ...PIPES,
+    ...APP_PROVIDERS
+  ])
+  .catch(err => console.error(err));
+
+}
+
+
+
+
+
+/*
+ * Vendors
+ * For vendors for example jQuery, Lodash, angular2-jwt just import them anywhere in your app
+ * You can also import them in vendors to ensure that they are bundled in one file
+ * Also see custom-typings.d.ts as you also need to do `typings install x` where `x` is your module
+ */
+
+
+/*
+ * Hot Module Reload
+ * experimental version by @gdi2290
+ */
+if ('development' === ENV && HMR === true) {
+  // activate hot module reload
+  let ngHmr = require('angular2-hmr');
+  ngHmr.hotModuleReplacement(main, module);
+} else {
+  // bootstrap when documetn is ready
+  document.addEventListener('DOMContentLoaded', () => main());
+}

src/platform/browser/angular2-material2/index.ts

@@ -0,0 +1,37 @@
+import {MdButton, MdAnchor} from '@angular2-material/button';
+import {MD_CARD_DIRECTIVES} from '@angular2-material/card';
+import {MdCheckbox} from '@angular2-material/checkbox';
+import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav';
+import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';
+import {MD_LIST_DIRECTIVES} from '@angular2-material/list';
+import {MdRadioGroup, MdRadioButton, MdRadioDispatcher} from '@angular2-material/radio';
+import {MdSpinner, MdProgressCircle} from '@angular2-material/progress-circle';
+import {MdToolbar} from '@angular2-material/toolbar';
+
+/*
+ * we are grouping the module so we only need to manage the imports in one location
+ */
+
+export const MATERIAL_PIPES = [
+
+];
+
+export const MATERIAL_DIRECTIVES = [
+  ...MD_SIDENAV_DIRECTIVES,
+  ...[
+    MdAnchor,
+    MdButton,
+    MdToolbar,
+    MdCheckbox,
+    MdRadioButton,
+    MdSpinner,
+    MdProgressCircle
+  ],
+  ...MD_INPUT_DIRECTIVES,
+  ...MD_LIST_DIRECTIVES,
+  ...MD_CARD_DIRECTIVES
+];
+
+export const MATERIAL_PROVIDERS = [
+  MdRadioDispatcher
+];

src/platform/browser/directives.ts

@@ -0,0 +1,22 @@
+/*
+ * These are globally available directives in any template
+ */
+
+import {provide, PLATFORM_DIRECTIVES} from 'angular2/core';
+
+// Angular 2 Router
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+
+// Angular 2 Material 2
+// TODO(gdi2290): replace with @angular2-material/all
+import {MATERIAL_DIRECTIVES} from './angular2-material2';
+
+// application_directives: directives that are global through out the application
+export const APPLICATION_DIRECTIVES = [
+  ...ROUTER_DIRECTIVES,
+  ...MATERIAL_DIRECTIVES
+];
+
+export const DIRECTIVES = [
+  provide(PLATFORM_DIRECTIVES, { multi: true, useValue: APPLICATION_DIRECTIVES })
+];

src/platform/browser/index.ts

@@ -0,0 +1,3 @@
+export * from './directives';
+export * from './pipes';
+export * from './providers';

src/platform/browser/pipes.ts

@@ -0,0 +1,14 @@
+/*
+ * These are globally available pipes in any template
+ */
+
+import {provide, PLATFORM_PIPES} from 'angular2/core';
+
+// application_pipes: pipes that are global through out the application
+export const APPLICATION_PIPES = [
+
+];
+
+export const PIPES = [
+  provide(PLATFORM_PIPES, { multi: true, useValue: APPLICATION_PIPES })
+];

src/platform/browser/providers.ts

@@ -0,0 +1,34 @@
+/*
+ * These are globally available services in any component or any other service
+ */
+
+
+import {provide} from 'angular2/core';
+
+// Angular 2
+import {FORM_PROVIDERS} from 'angular2/common';
+
+// Angular 2 Http
+import {HTTP_PROVIDERS} from 'angular2/http';
+// Angular 2 Router
+import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
+
+// Angular 2 Material
+// TODO(gdi2290): replace with @angular2-material/all
+import {MATERIAL_PROVIDERS} from './angular2-material2';
+
+/*
+* Application Providers/Directives/Pipes
+* providers/directives/pipes that only live in our browser environment
+*/
+export const APPLICATION_PROVIDERS = [
+  ...FORM_PROVIDERS,
+  ...HTTP_PROVIDERS,
+  ...MATERIAL_PROVIDERS,
+  ...ROUTER_PROVIDERS,
+  provide(LocationStrategy, { useClass: HashLocationStrategy })
+];
+
+export const PROVIDERS = [
+  ...APPLICATION_PROVIDERS
+];

src/platform/environment.ts

@@ -0,0 +1,34 @@
+// Angular 2 browser
+import {
+  ELEMENT_PROBE_PROVIDERS,
+  ELEMENT_PROBE_PROVIDERS_PROD_MODE
+} from 'angular2/platform/browser';
+
+// Angular 2
+import {enableProdMode} from 'angular2/core';
+
+// Environment Providers
+let PROVIDERS = [];
+
+if ('production' === ENV) {
+  // Production
+  enableProdMode();
+
+  PROVIDERS = [
+    ...PROVIDERS,
+    ELEMENT_PROBE_PROVIDERS_PROD_MODE
+  ];
+
+} else {
+  // Development
+  PROVIDERS = [
+    ...PROVIDERS,
+    ELEMENT_PROBE_PROVIDERS
+  ];
+
+}
+
+
+export const ENV_PROVIDERS = [
+  ...PROVIDERS
+];

src/polyfills.ts

@@ -0,0 +1,28 @@
+// Polyfills
+// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
+
+// import 'ie-shim'; // Internet Explorer
+// import 'es6-shim';
+// import 'es6-promise';
+// import 'es7-reflect-metadata';
+
+// Prefer CoreJS over the polyfills above
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+require('zone.js/dist/zone');
+
+// Typescript emit helpers polyfill
+import 'ts-helpers';
+
+if ('production' === ENV) {
+  // Production
+
+
+} else {
+  // Development
+
+  Error.stackTraceLimit = Infinity;
+
+  require('zone.js/dist/long-stack-trace-zone');
+
+}

src/vendor.ts

@@ -0,0 +1,36 @@
+// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on
+// chunking vendors files for async loading. You would need to import the async loaded vendors
+// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to
+// run `typings install x` where `x` is your module
+
+// Angular 2
+import 'angular2/platform/browser';
+import 'angular2/platform/common_dom';
+import 'angular2/core';
+import 'angular2/common';
+import 'angular2/http';
+import 'angular2/router';
+
+// RxJS
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/mergeMap';
+
+// Angular 2 Material 2
+// TODO(gdi2290): uncomment when material is fixed
+// import '@angular2-material/sidenav';
+// import '@angular2-material/toolbar';
+// import '@angular2-material/button';
+// import '@angular2-material/checkbox';
+// import '@angular2-material/radio';
+// import '@angular2-material/progress-circle';
+// import '@angular2-material/card';
+// look in platform/directives and platform/providers
+
+if ('production' === ENV) {
+  // Production
+
+
+} else {
+  // Development
+
+}