Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 3: How to add a component

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?

like image 935
Mister Smith Avatar asked Apr 13 '18 10:04

Mister Smith


People also ask

How do I create a custom component in Ionic?

Step 1: Creating an ionic custom component example module. ts. Add PersonComponen in @NgModule declarations, entry component. You can check Angular official documentation on the Angular custom component.

What is a component in Ionic?

Ionic apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app. Ionic comes with a number of components, including modals, popups, and cards.


4 Answers

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.

enter image description here

like image 186
Willian De Castro Avatar answered Oct 22 '22 07:10

Willian De Castro


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.

like image 20
Mister Smith Avatar answered Oct 22 '22 07:10

Mister Smith


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.

like image 21
Mustafa Lokhandwala Avatar answered Oct 22 '22 06:10

Mustafa Lokhandwala


Just import ComponentsModule in app.module.ts

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

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ComponentsModule
    ...
  ],
  ...
like image 30
Moazzem Hossen Avatar answered Oct 22 '22 07:10

Moazzem Hossen