Reputation: 5585
My app.component.ts :
import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component';
@Component({
selector: 'my-app',
template: '<h1>Hello Angular 2</h1><courses></courses>',
directives: [CoursesComponent]
})
export class AppComponent { }
My courses.component.ts :
import {component} from 'angular2/core';
@Component({
selector : 'courses',
template : '<h2>Courses</h2>'
})
export class CoursesComponent{
}
Though all the details are there I am not sure why still chromebug says that "component is not defined" .
The error is :
ReferenceError: Component is not defined
Error loading http://localhost:3000/app/boot.js
at eval (courses.component.ts:3)
at execute (courses.component.ts:7)
at ensureEvaluated (system.src.js:3186)
at ensureEvaluated (system.src.js:3178)
at ensureEvaluated (system.src.js:3178)
at Object.execute (system.src.js:3304)
at doDynamicExecute (system.src.js:703)
at link (system.src.js:905)
at doLink (system.src.js:557)
at updateLinkSetOnLoad (system.src.js:605)
Any help is greatly appreciated .
Upvotes: 1
Views: 600
Reputation: 304
In courses.component.ts you have the next code line:
import {component} from 'angular2/core';
And it should be
import {Component} from 'angular2/core';
You are using @Component which could not be resolved if you don't import it.
Upvotes: 1
Reputation: 657108
directives
in @Component()
are deprecated since 2.0.0 beta.6
.
Register them in @NgModule()
instead
@Component({
...,
directives: [CoursesComponent]
})
you need to add it to
@NgModule({
declaration: [CoursesComponent],
...
})
Upvotes: 2