Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 3 Import Custom Component

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?

like image 938
fitzmode Avatar asked Aug 01 '17 12:08

fitzmode


People also ask

How to add custom component in ionic 5 app?

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.

How to install the ionic CLI?

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.

What is an ionic component in ionic framework?

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.

What are ionic components in angular?

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.


2 Answers

This is how I solved it:

  1. Suppose, your custom-component.ts exports class CustomComponent.
  2. 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 { }
    
  3. 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).

like image 197
Kapil Sharma Avatar answered Oct 19 '22 20:10

Kapil Sharma


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 {}
like image 41
umki Avatar answered Oct 19 '22 20:10

umki