如何将组件附加到Angular中的根组件？

Question

我创建了一个courses.component.ts组件，现在我想添加它app.component.ts但它不起作用。为什么呢？

在app.component.ts中：

import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component';

@Component({
    selector: 'my-app',
    template: '<h1>{{ mainheading }}</h1><courses></courses>',
})

export class AppComponent {
    mainheading = "My Angular App";
}

在courses.component.ts中：

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

@Component({
    selector:'courses',
    template: `<h2>Courses</h2> {{title}}
    <ul> 
    <li *ngFor="#c of courses">{{c}} </li>
    </ul>`
    providers: [CourseService]
})

export class CoursesComponent {
    title: string ="The title of courses";
    courses; 

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

在course.service.ts中：

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

为什么我的代码不起作用？我在Sublime Text 3中使用Angular。