Web Connection
Service not found in Step by Step: An Introduction to Angular 2.0 with Web Connection Step 9 - Refactoring into a Service, walk through tutorial
Gravatar is a globally recognized avatar based on your email address. Service not found in Step by Step: An Introduction to Angular 2.0 with Web Connection Step 9 - Refactoring into a Service, walk through tutorial
  Scott Malinowski
  All
  Jun 9, 2017 @ 11:14am

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

Gravatar is a globally recognized avatar based on your email address. re: Service not found in Step by Step: An Introduction to Angular 2.0 with Web Connection Step 9 - Refactoring into a Service, walk through tutorial
  Rick Strahl
  Scott Malinowski
  Jun 9, 2017 @ 12:20pm

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 ---

Gravatar is a globally recognized avatar based on your email address. re: Service not found in Step by Step: An Introduction to Angular 2.0 with Web Connection Step 9 - Refactoring into a Service, walk through tutorial
  Scott Malinowski
  Rick Strahl
  Jun 9, 2017 @ 02:17pm

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

Gravatar is a globally recognized avatar based on your email address. re: Service not found in Step by Step: An Introduction to Angular 2.0 with Web Connection Step 9 - Refactoring into a Service, walk through tutorial
  Rick Strahl
  Scott Malinowski
  Jun 9, 2017 @ 07:42pm

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 ---

© 1996-2017