Essentially, using ionic g component myComponent will not only update the app.module.ts file but also create the component within the app folder.

If you prefer a more sophisticated approach to adding components, you can follow these steps:

ionic g module components

This command will generate a new module folder named components. You can then proceed to create multiple components as follows:

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

In the components.module.ts file, the setup could look 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 {}

Don't forget to import the components module in the app.module.ts:

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

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

In order to test the components, you'll need to create a new page or component:

ionic g page testing

Make sure to include the components module in your testing component/page (or in your existing home page similarly):

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

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

Finally, simply incorporate the component into the testing page by using the component selector, for example:

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

I hope this serves as a helpful guide.

This snippet shows the selector used 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';
  }

}

Here is the content of 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 {}

And lastly, app.module.ts looks like this:

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

To correctly set up your project, remember to import component-module in imports and declare the component-name in entry components within app.module.ts.

In components.module.ts, ensure that you both declare and export the component while also importing IonicModule.

If struggling with similar issues, make sure to include IonicModule in components.module.ts and only add entryComponent and import componentModule in app.module.ts.

Upon completing the aforementioned steps ...

This solution was successful only in the home page HTML. I achieved this by including app before my component's name, as shown below:

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

One important step is to add a new module specifically for your custom component.

I am puzzled as to why the command "ionic generate component components/myComponent --export" no longer generates this outdated module. I encountered the same issue in this discussion.

Experiment with this technique in Ionic version 6.11.0 and see flawless results. Instructions for constructing a reusable element called 'FeaturedProduct' -

Step 1: Generate a component using the command

ionic g component components/FeaturedProduct

Step 2: Develop a module specifically for this component.

ionic g module components/FeaturedProduct

Step 3: Incorporate FeaturedProductComponent into the featured-product.module.ts file

@NgModule({
  declarations: [FeaturedProductComponent],
  exports: [FeaturedProductComponent],
  imports: [
    CommonModule
  ]
})

Step 4: Integrate FeaturedProductModule within the module.ts file of your desired page.

@NgModule({
  imports: [
    ...
    ...
    FeaturedProductModule
  ],
  declarations: [Tab2Page]
})

Now utilize the component by using the following tag

<app-featured-product></app-featured-product>

Located within the src/components directory

myComponent.html:

//Below is your component's HTML Code. For instance:
<ion-list radio-group (ionSelect)="change($event, item.type);" 
  ... 
</ion-list>

components.module.ts:

import {myComponentComponent} from "./myComponent/myComponent";
@NGModule({
  declatations: [myComponentComponent],
  imports:[],
  exports: [myComponentComponent]
})
export class ComponentsModule{}

Within the src/app folder

app.module.ts:

import { MyComponentComponent } from "../components/myComponent/myComponent";

@NGModule({
   declarations: [
      yourPages....,
     MyComponentComponent
   ]
)}

To implement it:

For instance in HomePage.html:

<myComponent> </myComponent>

To create a custom component, use the following command:

ionic generate component components/Custom-Component

Then, simply include the new component in your HTML file.