The following are the steps for preparing Angular application:

1. Add the @angular/http module to dependencies in package.json. The HTTP module is required to consume Web API services. The updated package.json is given here:

 {   
   "version": "1.0.0",   
   "name": "my-todo",   
   "private": true,   
   "dependencies": {   
     "@angular/common": "~4.0.0",   
     "@angular/compiler": "~4.0.0",   
     "@angular/core": "~4.0.0",   
     "@angular/forms": "~4.0.0",   
     "@angular/http": "~4.0.0",   
     "@angular/platform-browser": "~4.0.0",   
     "@angular/platform-browser-dynamic":   "~4.0.0",   
     "systemjs": "0.19.40",   
     "core-js": "^2.4.1",   
     "rxjs": "5.0.1",   
     "zone.js": "^0.8.4"   
   },   
   "devDependencies": {   
     "@types/node": "^6.0.46",   
     "gulp": "^3.9.1",   
     "typescript": "~2.1.0"   
   }   
 }

2. Update systemjs.config.js with the mapping for @angular/http. The updated systemjs.config.js is as shown:

  (function (global) {   
      System.config({           
          paths: {               
             'npm:': 'node_modules/'   
        },   
        map: {   
            'app': 'app',   
            '@angular/common':   
   'npm:@angular/common/bundles/common.umd.js',   
            '@angular/compiler': 
   'npm:@angular/compiler/bundles/compiler.umd.js',   
            '@angular/core': 
   'npm:@angular/core/bundles/core.umd.js',   
            '@angular/forms': 
   'npm:@angular/forms/bundles/forms.umd.js',   
            '@angular/http': 
   'npm:@angular/http/bundles/http.umd.js',   
            '@angular/platform-browser':   
   'npm:@angular/platform-browser/bundles/platform-
    browser.umd.js',   
            '@angular/platform-browser-dynamic':   
   'npm:@angular/platform-browser-
    dynamic/bundles/platform-browser-dynamic.umd.js',   
            'rxjs': 'npm:rxjs'   
          },   
           packages: {   
              app: {   
                  main: './main.js',   
                  defaultExtension:   'js'   
              },   
              rxjs: {   
                  defaultExtension:   'js'   
              }   
          }   
      });   
   })(this);   

3. Import the HttpModule in AppModule, as illustrated:

   import { NgModule } from '@angular/core';   
   import { BrowserModule } from '@angular/platform-   
   browser';   
   import { FormsModule } from '@angular/forms';   
   import { HttpModule } from '@angular/http';   
   import { AppComponent } from './app.component';   
   import { TodoService } from './todo.service'   
   @NgModule({   
   imports: [   
        BrowserModule,   
        FormsModule,   
        HttpModule   
    ],   
       declarations: [AppComponent],   
       providers: [TodoService],   
       bootstrap: [AppComponent]   
   })   
   export class AppModule { }   

4. Update model Todo, as shown:

export class Todo {   
    id: number;   
    title: string;   
    completed: boolean;   
    constructor(id: number,   title: string, completed: boolean) {   
        this.id = id;   
        this.title = title;   
        this.completed =   completed;   
    }  
    set isCompleted(value:   boolean) {   
        this.completed = value;   
    }   
}