Ionic 3 Import Custom Component

user_8385019 0
Viewed 12130

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?

ionic2 ionic3 ionic-framework angular
8 Answers

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 {}
user_17363010

After successfully using the CUSTOM_ELEMENTS_SCHEMA declarations in my modules and which forces you to name your selectors with a "-" dash, so I would have to use something like: 

<MyPlayer-comp></MyPlayer-comp>

I was upset with this total non-sense from these frameworks camel-case freaks even though it worked and ngc no longer complained about "...is not a known element...".

I personally prefer to name everything the same (the class, the selector, the file, etc...)

I reverted to the following which is working with lazy-loading while I build for the web. (ionic cordova build browser --prod --release)

Your custom component module declarations:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { MyPlayerComp } from './MyPlayerComp ';
//
@NgModule({
    declarations: [MyPlayerComp ],
    imports: [IonicPageModule.forChild(MyPlayerComp )],
    exports: [MyPlayerComp ],
})
export class MyPlayerCompModule { }

In the modules where you want to use your custom component use the following:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { PlyrView } from './PlyrView';
//
import { MyPlayerCompModule } from './MyPlayerComp.module' // 20180720
//
@NgModule({
    declarations: [PlyrView],
    imports: [
        IonicPageModule.forChild(PlyrView),
        MyPlayerCompModule,                      // <<<<<
    ],                
    exports: [PlyrView],
})
export class PlyrViewModule { }

I hope this helps someone

user_10802660

This is how I solved it, by following the below link :
http://evalogical.com/blog/components-ionic-framework-3

  1. Import the component in the home.ts file like this,
    import { MyComponent } from '../../components/my/my';

  2. In home.module.ts import the ComponentsModule and add it in the imports,like this. 

    import { NgModule } from '@angular/core';  
import { IonicPageModule } from 'ionic-angular';  
import { HomePage } from './home';  
import { ComponentsModule } from '../../components/components.module';  
@NgModule({  
declarations: [  
HomePage,  
],  
imports: [  
IonicPageModule.forChild(HomePage),  
ComponentsModule  
],  
})  
export class HomePageModule {}

  3. Import the IonicPageModule in the components.module.ts file and here we need to import CUSTOM_ELEMENTS_SCHEMA in schemas like this.

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
import { MyComponent } from './my/my';  
import { IonicPageModule } from 'ionic-angular';  
@NgModule({  
declarations: [MyComponent],  
imports: [IonicPageModule.forChild(MyComponent)],  
exports: [MyComponent],  
schemas: [CUSTOM_ELEMENTS_SCHEMA]  
})  
export class ComponentsModule {}

  4. Remove the line
    import { HomePage } from '../pages/home/home'; from the app.module.ts file and instead add the following line import { HomePageModule } from '../pages/home/home.module';

  5. Now you can use the selector of the component as a html tag in the home.html file

user_101160180

If myComponent.ts is your component.

Then you can remove the generated module by the commands ionic generate (if you dont use lazy loading) and add the following directly in app.module.ts

    @NgModule({
      declarations: [
        MyComponent,
      ]
      entryComponents: [
        MyComponent
      ] });

And myComponent.ts looks like this :

@Component({
  selector: 'app-sheduler',
  templateUrl: 'sheduler.html'
})
export class ShedulerComponent {}
user_54664770
Related