Hello All,

I have resumed my learning curve with Web Connection (and Angular 2, etc., etc.) by following Rick's Step by Step Walk Through Tutorial (see subject line for description of where).

When I updated the web application with the ToDoService.ts file, the LoadToDos button stopped working and the web page says: EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'getTodos' of undefined TypeError: Cannot read property 'getTodos' of undefined.

Also, the source code for component todo (todo.ts) (using WebStorm 2017.1.4) shows the error in this screen shot:

The Complete Source Code for todo.ts and ToDoService.ts is included here:

/*******************************************************************
  *  todo.ts
 */
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    //moduleId: module.id,
    selector: 'todo',
    styleUrls: ['./todo.css'],
    templateUrl: './todo.html'
})
export class Todo implements OnInit {
    constructor(private http:Http) { }

    todos:TodoItem[]  = [
        {
            title: "SWFox Angular Presentation",
            description: "Try to show up on time this time",
            completed: false
        },
        {
            title: "Do FoxPro presentation",
            description: "Should go good, let's hope I don't fail...",
            completed: false
        },
        {
            title: "Do raffle at the end of day one",
            description: "Should go good, let's hope I don't fail...",
            completed: false
        },
        {
            title: "Arrive at conference",
            description: "Arrive in Phoenix and catch a cab to hotel",
            completed: true
        }
    ];
    activeTodo:TodoItem = new TodoItem();
    formVisible = true;
    message = "";


    ngOnInit() {
        this.loadTodos();
    }

    toggleCompleted(todo:TodoItem) {
        todo.completed = !todo.completed;
    }

    loadTodos() {
        this.service.getTodos()
            .subscribe( todos => {
                this.todos = todos;
            }, msg => {
                this.showError(msg);
            });
    }

    removeTodo(todo:TodoItem) {
        this.service.removeTodo(todo)
            .subscribe( result => {
                this.todos = this.todos.filter((t, i) => t.title != todo.title)
            }, msg => {
                this.showError(msg);
            });
    }

    addTodo(todo,form) {

        this.service.addTodo(todo)
            .subscribe((result)=> {
                this.todos.splice(0, 0, todo);
                this.activeTodo = new TodoItem();
                form.reset();
            }, msg => {
                this.showError(msg);
            });
    }

    showError(msg){
        this.message = msg;
    }

}

export class TodoItem {
    title:string = null;
    description:string = null;
    completed:boolean = false;
}



/*********************************************************
 * ToDoService.ts
 * Created by User on 6/9/2017.
 */
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import {Observable} from 'rxjs';
import {TodoItem} from "./todo";

@Injectable()
export class TodoService {

    baseUrl = "http://localhost/todo/";

    constructor(private http:Http) {
    }

    getTodos() {
        return this.http.get(this.baseUrl + "todos.td")
            .map( (response) => {
                // transform the response
                // into an object
                return response.json();
            })
            .catch( (response) => {
                // rethrow the error as something easier to work
                // with. Normally you'd return an error object
                // with parsed error info
                return Observable.throw("failed to get todo items");
            });
    }

    addTodo(todo:TodoItem) {
        return this.http.put(this.baseUrl + "todo.td",todo)
            .map( response => {
                return true;
            })
            .catch( response => {
                return Observable.throw("Failed to save to do item: " + todo.title);
            });
    }

    removeTodo(todo:TodoItem) {
        return this.http.delete(this.baseUrl + "todo.td?title=" + todo.title)
            .map(response => {
                return true;
            })
            .catch(response => {
                return Observable.throw( "Failed to save to do item: " + todo.title);
            });

    }
}

I have tried substituting ToDoService.getTodos and that did not work:

Not sure what else to do with it?

Anyone have any ideas on how to resolve this "service" issue.

Thanks in advance!

Scott Malinowski

Arizona Fox Software LLC

You have to inject the service into the constructor:

export class Todo implements OnInit {
    constructor(private http:Http, private service: TodoService) { }

This provides the service as a property so you can reference this.service.

+++ Rick ---

Rick,

Thanks for the quick reply. That got rid of all the undefined errors, etc. associated with this.service. However, now when I try to run the application on IIS, I get this error:

Something else I missed?

Thanks!

Scott Malinowski

Arizona Fox Software LLC

Your todo virtual is not configured properly. Make sure you have the right folder set up and todo is a virtual application in IIS.

+++ Rick ---