Typescript class methods unrecognized

Question

I'm having a problem with using class' methods where they're imported.

This is a class I have

cloneable.ts

export interface Cloneable<T> {
    clone() : T;
}

task.ts

import { Cloneable } from './cloneable'

export class Task implements Cloneable<Task>  {
    name: string;
    finished: boolean;

    constructor(name: string = "", finished: boolean = false) {
        this.name = name;
        this.finished = finished;
    }

    clone() : Task {
        return new Task(this.name, this.finished);
    }
}

I'm using the Task class in another file

todoItem.component.ts

import { Component, Input } from '@angular/core';
import { Task } from '../../model/task'

@Component({
  selector: 'todo-item',
  templateUrl: './app/todoItem/todoItem.component.html',
  styleUrls: ['./app/todoItem/todoItem.component.css']
})
export class TodoItemComponent {
  @Input() name: string;
  @Input() tasks: Task[];
  currentEdited: { original: Task, toEdit: Task } = null;

  startEditing = function(task: Task) {
    this.cancelEditing();
    this.currentEdited = { original: task, toEdit: new Task(task.name, task.finished) };  // problematic line
  }

  // uninteresting code
}

The error

http://localhost:3000/model/task Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:14 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/model/task(…)(anonymous function) @ localhost/:14

this is localhost/:14

<script>
      System.import('app').catch(function(err){ console.error(err); });
</script>

Notice the line
this.currentEdited = { original: task, toEdit: new Task(task.name, task.finished) };

There are two options I see to achieve my goal

1. this.currentEdited = { original: task, toEdit: new Task(task.name, task.finished) };
2. this.currentEdited = { original: task, toEdit: task.clone() };

although, when I'm not using class methods, it works, but I don't create a clone this.currentEdited = { original: task, toEdit: task };

This happened to me before, but I didn't find a way to handle this so I just accessed class members, but I guess that I should work this out.

This is my tryout angular2 project, just getting to know angular2.

Answer 1

In file todoItem.component.ts there is a script reference error, one to many . in the leading path.

import { Task } from './../model/task'

or if it really is another directory down then

import { Task } from './../../model/task'

Bot not this because you you should prefix with ./

import { Task } from '../../model/task'

Which is why the error reads that the file cannot be found (404)

http://localhost:3000/model/task Failed to load resource: the server responded with a status of 404 (Not Found)