Ionic 4 custom components

After doing all the above ...

only worked in home.page.html adding app before the name of my component like :

<app-my-component></app-my-component>

Basically, ionic g component myComponent will update the app.module.ts and create the component inside the app folder.

But if you want a more elegant way to add the components. Here is the steps:

ionic g module components

will generate a module folder called components. Then generate a bunch of components:

ionic g component components/myComponent --export
ionic g component components/myComponent2 --export
ionic g component components/myComponent3 --export
ionic g component components/myComponent4 --export

Inside components.module.ts could be write like this :

...
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { MyComponentComponent } from './my-component/my-component.component';
import { MyComponentComponent2 } from './my-component2/my-component2.component';
import { MyComponentComponent3 } from './my-component3/my-component3.component';
import { MyComponentComponent4 } from './my-component4/my-component4.component';

@NgModule({
  declarations: [
    MyComponentComponent,
    MyComponentComponent2,
    MyComponentComponent3,
    MyComponentComponent4
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  exports: [
    MyComponentComponent,
    MyComponentComponent2,
    MyComponentComponent3,
    MyComponentComponent4
  ]
})
export class ComponentsModule {}

and then make sure to import the components module inside the app.module.ts:

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    ComponentsModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

To test the components, you need to create a page or component again.

ionic g page testing

Import components module into your testing component/page or (into your current home page similarly):

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

@NgModule({
  imports: [
     ...
     ComponentsModule,
     ...
  ],
  declarations: [TestingPage]
})
export class TestingPageModule {}

Finally, just write the component inside the testing page by using the component selector. e.g.

<app-my-component></app-my-component>
<app-my-component2></app-my-component2>
<app-my-component3></app-my-component3>
<app-my-component4></app-my-component4>

Hope this might help.

This is your selector in components>foot-card>foot-card.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'foot-card',
  templateUrl: 'foot-card.html'
})
export class FootCardComponent {

  text: string;

  constructor() {
    console.log('Hello FootCardComponent Component');
    this.text = 'Hello World';
  }

}

This is your components.module.ts:

import { NgModule } from '@angular/core';
import { FootCardComponent } from './foot-card/foot-card';
import { IonicModule } from 'ionic-angular';

@NgModule({
    declarations: [FootCardComponent],
    imports: [IonicModule],
    exports: [FootCardComponent]
})

export class ComponentsModule {}

This is your app.module.ts:

import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'

@NgModule({
  declarations: [

  ],
  imports: [
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FootCardComponent
  ],
  providers: [
  ]
})
export class AppModule {}

You have to import component-module in import and declare component-name in entry components in app.module.ts.

In components.module.ts, You have to declare and export the component but don't forget to import IonicModule.

I was facing the same problem but no one told to import IonicModule In Components.module.ts and In app.module.ts, only add to entryComponent and import componentModule.

Finally figured this out, here's a repro that works:

ionic start myProject blank --type=angular
ionic g module components
ionic g component components/myComponent --export

This adds both a declaration and export to the components module for "myComponent".

To use the component just add ComponentsModule to your imports in your page module, e.g.

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild([
        {
            path: '',
            component: HomePage
        }
    ])
],
declarations: [HomePage]
})
export class HomePageModule { }

This way nothing is added to app.module.ts which is how it should be.

Also note if you want to use ANY components in your own custom components, you need to add IonicModule to the imports in components.module.ts

Hope this helps :-)