I am currently running an Angular 2 demo using TypeScript. There are two files: the index.html file that is being imported as a template and the TypeScript file. The TypeScript file compiles to a pomodoro-timer.js and for this demo, all of the classes are contained in one file:
pomodoro-timer.ts
import {
Component,
Input,
Pipe,
PipeTransform,
Directive,
OnInit,
HostListener
} from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
/// Model interface
interface Task {
name: string;
deadline: Date;
queued: boolean;
pomodorosRequired: number;
}
/// Local Data Service
class TaskService {
public taskStore: Array<Task> = [];
constructor() {
const tasks = [
{
name: "Code an HTML Table",
deadline: "Jun 23 2015",
pomodorosRequired: 1
},
{
name: "Sketch a wireframe for the new homepage",
deadline: "Jun 24 2016",
pomodorosRequired: 2
},
{
name: "Style table with Bootstrap styles",
deadline: "Jun 25 2016",
pomodorosRequired: 1
},
{
name: "Reinforce SEO with custom sitemap.xml",
deadline: "Jun 26 2016",
pomodorosRequired: 3
}
];
this.taskStore = tasks.map(task => {
return {
name: task.name,
deadline: new Date(task.deadline),
queued: false,
pomodorosRequired: task.pomodorosRequired
};
});
}
/// Component classes
/// - Main Parent Component
@Component({
selector: 'pomodoro-tasks',
styleUrls: ['pomodoro-tasks.css'],
templateUrl: 'pomodoro-tasks.html'
})
class TasksComponent {
today: Date;
tasks: Task[];
constructor() {
const TasksService: TasksService = new TasksService();
this.tasks = taskService.taskStore;
this.today = new Date();
}
};
bootstrap(TasksComponent);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Angular 2!</title>
<!-- required stylesheets -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- required javascripts -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="systemjs.config.js"></script>
<script>
// importation of component module
// with no file extension
System.import('built/pomodoro-tasks').then(null, console.error.bind(console));
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Pomodoro Tasks</strong>
</div>
</div>
</nav>
<pomodoro-tasks></pomodoro-tasks>
</body>
</html>
Everything seems to be working fine, however, this portion of the pomodoro-timer.ts file seems to be throwing an error:
class TasksComponent {
today: Date;
tasks: Task[];
constructor() {
// (Cannot find name 'TasksService'.at line 91 col 29, BELOW)
// (Block-scoped variable 'TasksService' used before its declaration.at line 91 col 48, BELOW)
const TasksService: TasksService = new TasksService();
// (Cannot find name 'taskService'.at line 92 col 22, BELOW)
this.tasks = taskService.taskStore;
this.today = new Date();
}
};
bootstrap(TasksComponent);
Anyone familiar with TypeScript have any idea why I would be getting those errors? I am using Atom IDE with TypeScript plug-in.
1)First you have a typo taskService instead of tasksService
2)You shouldn't instantiate TasksService as you have done here.
constructor() {
const TasksService: TasksService = new TasksService();
this.tasks = taskService.taskStore;
this.today = new Date();
}
You should rather change the code to this
constructor(private taskService:TasksService) {
this.tasks = this.taskService.taskStore;
this.today = new Date();
}
To learn more about dependency injection and best practices check this link https://angular.io/docs/ts/latest/guide/dependency-injection.html