Ionic 2/3 custom component with ionic cli

Question

If one uses the ionic cli to generate a component

ionic g component foobar

And then tries to use that selector

<foobar></foobar>

There is an error

Error: Template parse errors: 'foobar' is not a known element:

This is without any changes at all made to the code.

In the generated .ts file there is a suggested link for more details

/**
 * Generated class for the FoobarComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */

But this just navigates to a 404 page.

Anyone know if this is a known issue and if there is a workaround?

Answer 1

I had a similar issue and it's taken me a while to figure it out. I used the CLI tool to generate the custom component, which seems to have a slight issue. In my custom-component.module.ts the generator had added

...
import { IonicPageModule } from 'ionic-angular';
...
imports: [
    IonicPageModule.forChild(CustomComponent),
  ],
...

Changing these lines to

...
import { IonicModule } from 'ionic-angular';
...
imports: [
    IonicModule,
  ],
...

Fixes the main issue. To use <custom-component> in a page's HTML you then have to import the custom-component.module into the page module where you want to use it. For example if you wanted to use your component on the home page edit home-page.module.ts

...
import { CustomComponentModule } from "../../components/custom-component/custom-component.module";
...
imports: [
    CustomComponentModule,
    IonicPageModule.forChild(JobsPage),
  ],
...

And that seems to work for me!