Updated to @angular/material 2.0.0-beta.6 and @angular/* 4.1.3.

.angular-cli.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "m2-app"
+  },
+  "apps": [
+    {
+      "root": "m2-app",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "m2",
+      "styles": [
+        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+        "../node_modules/material-design-icons/iconfont/material-icons.css",
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "m2-app/tsconfig.app.json"
+    },
+    {
+      "project": "m2-app/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -3,21 +3,31 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 
 # dependencies
 /node_modules
-/bower_components
-
-# generated code
-aot/
 
 # IDEs and editors
 /.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage
 /libpeerconnection.log
 npm-debug.log
 testem.log
@@ -27,5 +37,6 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
-#System Files
+# System Files
 .DS_Store
+Thumbs.db

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { M2Page } from './app.po';
+
+describe('m2-app App', () => {
+  let page: M2Page;
+
+  beforeEach(() => {
+    page = new M2Page();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    page.getParagraphText().then(output => expect(output).toEqual('m2 works!'));
+  });
+});

e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class M2Page {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('m2-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

karma.conf.js

@@ -3,28 +3,37 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: './',
-    frameworks: ['jasmine', 'angular-cli'],
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
     ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
     files: [
-      { pattern: './src/test.ts', watched: false }
+      { pattern: './m2-app/test.ts', watched: false }
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './m2-app/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    angularCli: {
+      environment: 'dev'
     },
-    angularCliConfig: './angular-cli.json',
-    reporters: ['progress', 'karma-remap-istanbul'],
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

src/app/app.component.css → m2-app/app/app.component.css

@@ -63,7 +63,7 @@ md-sidenav-layout.m2app-dark {
 }
 
 .app-list {
-  border: 1px solid rgba(0,0,0,0.12);
+  border: 1px solid rgba(0, 0, 0, 0.12);
   width: 350px;
   margin: 20px;
 }

src/app/app.component.html → m2-app/app/app.component.html

@@ -1,4 +1,4 @@
-<md-sidenav-layout [class.m2app-dark]="isDarkTheme">
+<md-sidenav-container [class.m2app-dark]="isDarkTheme">
 
   <md-sidenav #sidenav mode="side" class="app-sidenav">
     Sidenav
@@ -8,7 +8,6 @@
     <button class="app-icon-button" (click)="sidenav.toggle()">
       <i class="material-icons app-toolbar-menu">menu</i>
     </button>
-
     Angular Material2 Example App
 
     <span class="app-toolbar-filler"></span>
@@ -38,26 +37,30 @@
     </md-card>
 
     <md-card class="app-input-section">
-      <md-input placeholder="First name"></md-input>
+      <md-input-container>
+        <input mdInput placeholder="First name">
+      </md-input-container>
 
-      <md-input #nickname placeholder="Nickname" maxlength="50">
+      <md-input-container>
+        <input mdInput #nickname placeholder="Nickname" maxlength="50">
         <md-hint align="end">
-          {{nickname.characterCount}} / 50
+          {{nickname.value.length}} / 50
         </md-hint>
-      </md-input>
+      </md-input-container>
 
-      <md-input>
+      <md-input-container>
+        <input mdInput #favphone>
         <md-placeholder>
           <i class="material-icons app-input-icon">android</i> Favorite phone
         </md-placeholder>
-      </md-input>
+      </md-input-container>
 
-      <md-input placeholder="Motorcycle model">
+      <md-input-container>
+        <input mdInput placeholder="Motorcycle model">
         <span md-prefix>
           <i class="material-icons app-input-icon">motorcycle</i>
-          &nbsp;
         </span>
-      </md-input>
+      </md-input-container>
     </md-card>
 
     <md-card>
@@ -78,19 +81,19 @@ <h3 md-line>{{food.name}}</h3>
       <label>
         Indeterminate progress-bar
         <md-progress-bar
-            class="app-progress"
-            mode="indeterminate"
-            aria-label="Indeterminate progress-bar example"></md-progress-bar>
+          class="app-progress"
+          mode="indeterminate"
+          aria-label="Indeterminate progress-bar example"></md-progress-bar>
       </label>
 
       <label>
         Determinate progress bar - {{progress}}%
         <md-progress-bar
-            class="app-progress"
-            color="accent"
-            mode="determinate"
-            [value]="progress"
-            aria-label="Determinate progress-bar example"></md-progress-bar>
+          class="app-progress"
+          color="accent"
+          mode="determinate"
+          [value]="progress"
+          aria-label="Determinate progress-bar example"></md-progress-bar>
       </label>
     </md-card>
 
@@ -129,7 +132,7 @@ <h3 md-line>{{food.name}}</h3>
 
   </div>
 
-</md-sidenav-layout>
+</md-sidenav-container>
 
 <span class="app-action" [class.m2app-dark]="isDarkTheme">
   <button md-fab><md-icon>check circle</md-icon></button>

m2-app/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { async, TestBed } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'm2 works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('m2 works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('m2 works!');
+  }));
+});