Angular 2 http.put() not calling Controller

I put a breakpoint on the Controller and http.put() in updateItem() isn't calling the Controller.

data.service.ts

import { Injectable, Inject } from 'angular2/core';
import { Http, Response, Headers } from 'angular2/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { TodoItem } from './TodoItem';
import 'rxjs/add/operator/share';

@Injectable()
export class DataService {
    public collection$: Observable<Array<TodoItem>>;
    private _collectionObserver: any;
    private _collection: Array<TodoItem>;
    private headers: Headers;

    constructor( @Inject(Http) private http: Http) {
        this.http = http;
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('Method', 'DELETE');

        this._collection = new Array<TodoItem>();
        this.collection$ = new Observable(observer => {
            this._collectionObserver = observer;
        }).share();
    }

    getItems() {
        this.http.get('/api/todo').map((res: Response) => res.json())
            .subscribe((items: Array<TodoItem>) => {
                this._collection = items;
                this._collectionObserver.next(this._collection);
            });
    }

    addItem(item: TodoItem) {
        this.http.post('/api/todo', JSON.stringify(item), { headers: this.headers })
            .map((res: Response) => res.json())
            .subscribe((data: TodoItem) => {
                this._collection.push(data);
                this._collectionObserver.next(this._collection);
            });
    }

    deleteItem(item: TodoItem) {
        alert(item.Name);
        this.http.delete('/api/todo/$(item.Key)', { headers: this.headers });
    }

    updateItem(item: TodoItem) {
        alert(item.Name);
        this.http.put('/api/todo/$(item.Key)', JSON.stringify(item), { headers: this.headers });
    }
}

TodoController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
using Angular.TodoAPI.Models;

namespace Angular.TodoAPI.Controllers
{
    [Route("api/[controller]")]
    public class TodoController : Controller
    {
        [FromServices]
        public ITodoRepository TodoItems { get; set; }

        [HttpGet]
        public IEnumerable<TodoItem> GetAll()
        {
            return TodoItems.GetAll().OrderBy(x => x.Name);
        }

        [HttpGet("{id}", Name = "GetTodo")]
        public IActionResult GetById(string id)
        {
            var item = TodoItems.Find(id);
            if (item == null)
            {
                return HttpNotFound();
            }
            return new ObjectResult(item);
        }

        [HttpPost]
        public IActionResult Create([FromBody] TodoItem item)
        {
            if (item == null)
            {
                return HttpBadRequest();
            }
            TodoItems.Add(item);
            return CreatedAtRoute("GetTodo", new { controller = "Todo", id = item.Key }, item);
        }

        [HttpPut("{id}")]
        public IActionResult Update(string id, [FromBody] TodoItem item)
        {
            if (item == null || item.Key != id)
            {
                return HttpBadRequest();
            }

            var todo = TodoItems.Find(id);
            if (todo == null)
            {
                return HttpNotFound();
            }

            TodoItems.Update(item);
            return new NoContentResult();
        }

        [HttpDelete("{id}")]
        public void Delete(string id)
        {
            TodoItems.Remove(id);
        }
    }
}