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?
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.
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.
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.
I finally solved both problems.
Problem #1: How to make the component recognisable by the app:
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
Add the component manually into the app.module.ts
, only inside declarations
:
@NgModule({
declarations: [
MyApp,
SomePage,
MyComponent
],
...
})
export class AppModule {}
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.
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.
Just import ComponentsModule
in app.module.ts
...
import { ComponentsModule } from '../components/components.module';
...
@NgModule({
declarations: [
MyApp,
...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
ComponentsModule
...
],
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With