Ionic/Angular components aren't showing up

Question

I am new to ionic but pretty well versed in angular. I am trying to add a component to my ionic/angular project but I can't seem to get new components to show up correctly. I think it's a routing issue. I have generated new components both with ionic g component my-component and ng g c my-other-component and they seemingly generate as normal. But then, when I try to add the new component to a page via <app-my-component></app-my-component> it doesn't show up. I noticed that when my new components are generated, they are generated with their html, ts, spec.ts, and scss files but not with a module file. Is that the problem? If so, how do I get ionic to automatically add the module file/routing to newly created components?

Answer 1

The solution I use to include custom components in an Ionic project is as follows.

Firstly, generate any components to be within a 'components' directory to keep things organized. Using your example, that would be with the command ionic g component components/my-component.

Then create a common components module 'components.module.ts' at the root of the components directory. Use the following format for its contents:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

// In this example, MyComponent would be imported as follows:
// import { MyComponent } from './my-component/my-component.component';

@NgModule({
    declarations: [/*Declare your components here. e.g. MyComponent*/],
  providers: [],
  imports: [
    CommonModule,
    IonicModule,
    // Add modules to import here. e.g. FormsModule
  ],
    exports: [/*Same as declarations*/]
})
export class ComponentsModule { }

And finally, add the ComponentsModule to the list of imports in 'app.module.ts' and import it.

All components added to ComponentsModule should now be included in your project upon recompilation.