Angular 2: is not a function, but exists

Question

I am trying to get an array from another class, but it says that the function does not exist. here is my code:

courses.component.ts

import {Component} from 'angular2/core'
import {CourseService} from './course.service'

@Component({
    selector: 'courses',
    template: `
        <h2>Courses</h2>
        {{ title }}
        <ul>
            <li *ngFor ="#course of courses">
            {{course}}
            </li>
        </ul>
        `,
    providers: [CourseService]
})
export class CoursesComponent{
    title = "The title of courses page";
    courses;

    constructor(courseService: CourseService){
        this.courses = CourseService.getCourses();
    }
}

course.service.ts

export class CourseService{
    getCourses() : string[]{
        return ["Course1","Course2","Course3"];
    }
}

Answer 1

You need to specify an argument name, not an argument type

 this.courses = courseService.getCourses();
                ^ lower case c

Answer 2

I think this is some kind of error, because TypeScript recognizes the method, but when I delete and re-type the getCourses () method in the component, it says that the method was not found, then I go to the service and start deleting empty lines, and the method works. I am currently using Angular 4

Answer 3

. , - .

getCourses(): string[] {

and printed it again manually. When I ran the code, it worked. Maybe some invisible character stuck in and ruined Typescript? Who knows.