Angular 2 Component issue

Question

I've been learning Angular2 for a short time now, everything was fine. I've recently tried to use Ionic 2 with Angular 2 but cannot seem to use the custom component i make within my files. I'm sure it's a simple mistake on my part, was wondering if anyone could tell me what i'm doing wrong.

I have a base @Component with selector of 'contact-form', it does nothing except create a form within a templateURL html file.

Within the file i wish to use this component i import the Component from ./path...

i then add directives: [Component i created]

At this point i get the error:

if component is an angular component, verify it is part of this module

if component is a web component then add "CUSTOM_ELEMENTS_SCHEMA" to the @ngModule.schemas of this component.

I've never had this issue when using the quickstart application, just within ionic.

BeetleJuice BeetleJuice · Accepted Answer · 2016-10-12T03:59:40

Your setup no longer works. In early versions of Angular 2, you would import the classes to be used in your host component's template and list them in a Directives array of the host component.

Now the setup is very different. Have another look at the quickstart.

What you want to do is list the directive among the declarations array of the module that will use it:

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, CustomDirective ],
  bootstrap:    [ AppComponent ]
})

Once the directive (or component) is declared as belonging to (or imported into) an NgModule, Angular will know to look for it in templates. So you can just start to use your custom directive/component without having to import it into the host component.

Angular 2 Component issue

1 Answers