I'm stuck with importing a custom component into a page in Ionic 3. This was relatively trivial in Ionic 2 but I cant seem to get it to work in Ionic 3.
I have an existing page module named other
.After running ionic g component test
, I import the automatically generated ComponentsModule
into the other.module.ts
and added it to the imports
array.
import { ComponentsModule } from "../../components/components.module";
@NgModule({
declarations: [
OtherPage,
],
imports: [
IonicPageModule.forChild(OtherPage),
ComponentsModule,
],
})
export class OtherPageModule {}
I then add the component selector to the page as <test></test>
.
This results in an error :
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ion-content padding>
[ERROR ->]<test> </test>
</ion-content>
"): ng:///AppModule/OtherPage.html@16:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.
This does not work for me. I also tried to create an module
for the test component and imported it in the same manner but this does not work for me.
I cant seem to find any documentation or examples for this.How are custom component imported in Ionic 3?
Hi, Buddy, Today we are going to learn how to add custom component in the ionic 5 app. Sometimes we want to use some UI snippets over multiple pages. So, custom components are the best way to do so. To generate the component by ionic CLI, run the following command. It will generate MyComponent files in the app/components directory.
To install the Ionic CLI, open a terminal, and run the following command: We can create a custom component, that can be used anywhere. Data in the component are private. Component name <app-person>, in our case. using in home.html page In our Apps we have a custom component in ionic with its own variables and template.
The ionic component is one of the building blocks of the ionic framework. Ionic has lots of pre-built components like cards, lists, tabs, a grid, and more. Ionic apps are made of high-level building blocks called components, which allow us to construct the UI for our application. Here we will be creating our own custom component in Ionic.
Ionic components are the class, with an HTML template. For our custom component in the Ionic Angular project have a decorator that is @Component, to add metadata to a class to describe the component. Let’s create our own ionic custom component called app-person.
This is how I solved it:
CustomComponent
.import same in custom-component.module.ts as shown below:
import { CustomComponent } from './custom-component';
@NgModule({
declarations: [
CustomComponent,
],
imports: [
IonicPageModule.forChild(CustomComponent),
],
exports : [ CustomComponent ]
})
export class CustomComponentPageModule { }
Now import your custom component in the page you want it in, as shown below:
import { ContentDrawerPageModule } from '../../../components/custom-component/custom-component.module';
@NgModule({
declarations: [
HelloWorldPage,
],
imports: [
IonicPageModule.forChild(HelloWorldPage),
CustomComponentPageModule,
]
})
export class HelloWorldPageModule {}
And you have successfully imported your custom component (CustomComponent
) to your page (HelloWorldPage).
As indicated here https://github.com/ionic-team/ionic/issues/11560
unfortunately there's no way to make lazy load component, directive, pipe. any way let us know if you manage it.
So you can import your ComponentsModule in your page.module.ts . Here is mine.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ComponentsModule } from ../../components/components.module';
@NgModule({
declarations: [
WoDetailsPage,
],
imports: [
ComponentsModule,
IonicPageModule.forChild(WoDetailsPage),
],
})
export class WoDetailsPageModule {}
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