CODEWITHSUNDEEP
angular
Zielony_Buszmen
Zielony_Buszmen

Reputation: 67

Creating own component and selector causes errors

I have a problem with my angular2 app. I have that code:

// app.component.ts
import {Component} from '@angular/core';
import {CoursesComponent} from './courses.component'

@Component({
    selector: 'my-app',
    template: `<h1>Hello</h1><my-courses></my-courses>`,
    directives: [CoursesComponent]
})
export class AppComponent {
    name = 'Angular2';
}

and

// courses.component.ts
import {Component} from '@angular/core';

@Component({
    selector: 'my-courses',
    template: '<h2>Courses</h2>'
})
export class CoursesComponent {

}

And my app doesn't work. After I deleted <my-courses></my-courses> from template in app.component.ts it started working, but without my courses component. After i add this back, it will cause that errors: enter image description here

What I do wrong with that?

Upvotes: 0

Views: 50

Answers (2)

developer033
developer033

Reputation: 24874

Are the components part of the same module? If so, I guess that you aren't importing / declaring the component in your module.

Do this:

import { CoursesComponent } from './your-path';
// ... other imports    

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
      AppComponent,
      CoursesComponent
      ...
  ],
  // ...

export class AppModule { ... }

Also, you don't need to import CoursesComponent in AppComponent, just in AppModule.

Upvotes: 1

dlcardozo
dlcardozo

Reputation: 4013

Just add this to your ngModule:

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

import CUSTOM_ELEMENTS_SCHEMA from @angular/core

This is because you have a - in your component selector.

Upvotes: 0

Related Questions