Currently, I am delving into Angular2, but the challenge lies in the fact that every time I come across a helpful tutorial, it does not align with the latest version of Angular2.
Despite this, my current struggle involves attempting to inject a service from one file to another, but I'm unable to replicate what was demonstrated in the tutorial I was following.
For reference, here is the link to the tutorial:
./main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component} from "@angular/core";
import {TodoInput} from './todo-input';
import {TodoService} from "./todo-service";
@Component({
selector: 'my-app',
directives: [TodoInput],
template: '<div><todo-input></todo-input></div>'
})
class App{}
bootstrap(App, [TodoService]);
./todo-service.ts
import {Injectable} from "@angular/core";
@Injectable()
export class TodoService {
todos:string[] = [];
}
./todo-input.ts
import {Component} from "@angular/core";
import {TodoService} from "./todo-service";
@Component({
selector: 'todo-input',
template: `<div>
I'm a todo input
<input type="text" #myInput>
<button (mouseover)="onClick($event, myInput.value)">Click me</button>
</div>`
})
export class TodoInput{
constructor(todoService:TodoService) {
console.log(todoService);
}
onClick(event, value) {
console.log(event, value);
}
}
After encountering an issue and seeing a console message:
EXCEPTION: TypeError: Cannot read property 'query' of null ...
A small modification led to a resolution:
./todo-input.ts
import {Component} from "@angular/core";
import {TodoService} from "./todo-service";
@Component({
selector: 'todo-input',
template: `<div>
I'm a todo input
<input type="text" #myInput>
<button (mouseover)="onClick($event, myInput.value)">Click me</button>
</div>`
})
export class TodoInput{
constructor() {
console.log(TodoService);
}
onClick(event, value) {
console.log(event, value);
}
}
Following this adjustment, a normal object was displayed in the console, without any errors.
SystemJS config
<script>
(...SystemJS configuration example...)
</script>
Therefore, my query is: Why am I unable to call that service from the constructor argument as shown in the tutorial? Is there a specific step I am overlooking? While the tutorial appears to be comprehensive, I am facing challenges in grasping some fundamental concepts.
Thank you, Tom