ng-japan · tokkiyaa · Jan 12, 2018 · Jan 15, 2018 · Jan 15, 2018 · Jan 15, 2018
diff --git a/courses/material-todoapp/README.md b/courses/material-todoapp/README.md
@@ -8,7 +8,7 @@
 
 このハンズオンに必要な開発環境は以下のとおりです
 
-- Node.js 6系
+- Node.js 9系
 - Angular-CLI
 - JavaScript/TypeScriptのコーディングに適したテキストエディタ（[Visual Studio Code](https://code.visualstudio.com/)の使用をおすすめします。）
 
@@ -20,7 +20,7 @@
 
 ```
 $ node -v
-v6.9.5
+v9.3.0
 ```
 
 ### Angular-CLIのインストール
@@ -42,7 +42,7 @@ $ ng version
 | (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
  \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
                |___/
-@angular/cli: 1.0.0-beta.30
+@angular/cli: 1.6.3
 node: 6.9.5
 os: darwin x64
 ```

diff --git a/courses/material-todoapp/ch-1/README.md b/courses/material-todoapp/ch-1/README.md
@@ -25,7 +25,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'app';
 }
 ```
 
@@ -39,9 +39,26 @@ export class AppComponent {
 次に `./app.component.html` ファイルを見てみましょう
 
 ```html
-<h1>
-  {{title}}
-</h1>
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{ title }}!
+  </h1>
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+  </li>
+</ul>
+
 ```
 
 ここで使われている、 `{{title}}` は、データをテキストとして表示するための**補間**構文です。
@@ -62,6 +79,16 @@ export class AppComponent {
 ```
 
 ソースコードを保存するとコンパイルが始まり、Webブラウザは自動的にページを再読込します。
-表示されるテキストが変わっていることが確認できたら、次のチャプターに進みましょう！
+表示されるテキストが変わっていることが確認できたら、`./app.component.html` ファイルを以下のように変更して、シンプルにしましょう。
+
+```html
+<h1>
+  {{title}}
+</h1>
+
+```
+
+htmlを保存したタイミングでもコンパイルが始まり、自動的にページが再読込されます。
+ページがシンプルになったことを確認したら、次のチャプターに進みましょう！
 
-[次へ進む](../ch-2/README.md)
+[次へ進む](../ch-2/README.md)
diff --git a/courses/material-todoapp/ch-2/todo-app/.angular-cli.json b/courses/material-todoapp/ch-2/todo-app/.angular-cli.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "todo-app"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "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": "app",
+      "styles": [
+        "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": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}
diff --git a/courses/material-todoapp/ch-2/todo-app/.gitignore b/courses/material-todoapp/ch-2/todo-app/.gitignore
@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 
 # dependencies
 /node_modules
@@ -14,6 +15,7 @@
 .c9/
 *.launch
 .settings/
+*.sublime-workspace
 
 # IDE - VSCode
 .vscode/*
@@ -25,7 +27,7 @@
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage
 /libpeerconnection.log
 npm-debug.log
 testem.log
@@ -35,6 +37,6 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
-#System Files
+# System Files
 .DS_Store
 Thumbs.db
diff --git a/courses/material-todoapp/ch-2/todo-app/README.md b/courses/material-todoapp/ch-2/todo-app/README.md
@@ -1,13 +1,14 @@
 # TodoApp
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.30.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.
 
 ## Development server
+
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
@@ -20,12 +21,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Deploying to GitHub Pages
-
-Run `ng github-pages:deploy` to deploy to GitHub Pages.
 
 ## Further help
 
-To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/courses/material-todoapp/ch-2/todo-app/e2e/app.e2e-spec.ts b/courses/material-todoapp/ch-2/todo-app/e2e/app.e2e-spec.ts
@@ -1,14 +1,14 @@
-import { TodoAppPage } from './app.po';
+import { AppPage } from './app.po';
 
-describe('todo-app App', function() {
-  let page: TodoAppPage;
+describe('todo-app App', () => {
+  let page: AppPage;
 
   beforeEach(() => {
-    page = new TodoAppPage();
+    page = new AppPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
   });
 });
diff --git a/courses/material-todoapp/ch-2/todo-app/e2e/app.po.ts b/courses/material-todoapp/ch-2/todo-app/e2e/app.po.ts
@@ -1,6 +1,6 @@
-import { browser, element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
 
-export class TodoAppPage {
+export class AppPage {
   navigateTo() {
     return browser.get('/');
   }

diff --git a/courses/material-todoapp/ch-2/todo-app/e2e/tsconfig.e2e.json b/courses/material-todoapp/ch-2/todo-app/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
diff --git a/courses/material-todoapp/ch-2/todo-app/karma.conf.js b/courses/material-todoapp/ch-2/todo-app/karma.conf.js
@@ -1,5 +1,5 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
@@ -8,31 +8,21 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'karma-remap-istanbul']
-              : ['progress'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,