Ionic 4 custom components

Question

How do you load a component in ionic 4 after running the command ionic g component myComponent? I want to add a new generated custom component to my home page.

Answer 1

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 :-)

Answer 2

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.