Ionic 3: How to add a component

Question

When I do:

ionic generate component my-component

That created this folder structure:

components
    my-component
        my-component.ts
        my-component.scss
        my-component.html

    components.module.ts

I want to use this component in a page. I'm not planning to use the new lazy-loading mechanism in Ionic 3 but I wont mind to. Whatever works the easiest, I just want to use the component! By the way, my page does not have a module for itself, this is the folder structure for the page:

pages
    somepage
        somepage.ts
        somepage.scss
        somepage.html

Now back to the component: I use custom ionic components (ion-grid) in the template. So my-component.html looks like this:

<ion-grid></ion-grid>

That line is highlighted in red in VS Code. The error reads as follows:

'ion-grid' is not a known element:
1. If 'ion-grid' is an Angular component, then verify that it is part of this module.
2. If 'ion-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

This should be solved according to a hundred posts and questions by adding IonicModule and CommonModule into the components.module.ts:

@NgModule({
    declarations: [MyComponent],
    imports: [
        CommonModule ,
        IonicModule
    ],
    exports: [MyComponent]
})
export class ComponentsModule {}

But of course this does not solve the error.

The second problem is that the page does not recognize the new custom element. This line in somepage.html:

<my-component></my-component>

is highlighted in red as well and shows this error:

'my-component' is not a known element:
1. If 'my-component' is an Angular component, then verify that it is part of this module.
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I initially though I had to add the Components module to the app.module.ts:

@NgModule({
  declarations: [
    MyApp,
    SomePage
  ],
  imports: [
    ...
    ComponentsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    SomePage
  ],
  providers: [...]
})
export class AppModule {}   

But this solved nothing. After reading a ton of posts for 2 hours I realized the dreaded components.module.ts is meant for lazy loading and I would have to add a module for the page, so I gave up and tried adding the component directly to the app.module.ts:

@NgModule({
  declarations: [
    MyApp,
    SomePage,
    MyComponent
  ],
  imports: [
    ...
    MyComponent
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    SomePage
  ],
  providers: [...]
})
export class AppModule {}   

I've tried other combinations as well and nothing worked. For gods sake, this is the easiest thing to do in Angular, and it was easy as well in Ionic 2. What on Earth do you need to do to use a component in Angular 3?

Solution 1

I finally solved both problems.

Problem #1: How to make the component recognisable by the app:

1. Delete the components.module.ts. The next time you generate a component, use the flag that prevents ionic from creating this file again:

   ionic generate component mycomponent --no-module

2. Add the component manually into the app.module.ts, only inside declarations:

   @NgModule({
       declarations: [
           MyApp,
           SomePage,
           MyComponent
       ],
       ...
   })
   export class AppModule {}   
   

3. Now you can use it inside any page template.

---

Problem #2: How to use Ionic components inside the component template:

You don't need to do anything special. Just use them. I was getting some errors from before adding the component to the app.module.ts, and Visual Studio Code wasn't removing the errors from the Problems tab. But the app worked. I just restarted VS Code and the errors no longer appear. Apparently this is a known issue with VS Code, that you need to restart it to get rid of old errors.

Solution 2

You have to just delete the component.module.ts file and import your component into app.module.ts just like this

import { CircularTabs } from "../components/circular-tabs/circular-tabs";


@NgModule({
declarations: [
MyApp,
.
.
CircularTabs
]

and in your page where you want to use this component, add @ViewChild like this

import { CircularTabs } from "../../components/circular-tabs/circular-tabs";

export class MainPage {
@ViewChild("myTabs") myTabs: Tabs;
@ViewChild("myCircularTabs") circularTabs: CircularTabs;

Thats it! Your Component works. Hopefully it helps you.

Solution 3

Please consider this (in Ionic 3). Just put your component, in my case 'EditComponent', in your page module.

@NgModule({
  declarations: [
    EstabProfilePage,
    EditComponent
  ],

and all will work fine.

Solution 4

Just import ComponentsModule in app.module.ts

...
import { ComponentsModule } from '../components/components.module';
...

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ComponentsModule
    ...
  ],
  ...

View more solutions

Comments

[Suraj Rao]

why would you need ViewChild?

[carton]

No need to use ViewChild there.

[Mustafa Lokhandwala]

then what we can use there? please guide me

[Mister Smith]

Adding it into declarations and not into imports solved the problem. +1. ViewChild is not needed though. Now I just have the problem of ion-grid not being recognized in the component template.