Ionic 5 / Angular 9 - Error importing componente to page

Question

Im having troubles with the import and use a component in a page.

I have and component named prueba.component.ts that is exported by a module named prueba.module.ts

prueba.module.ts:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { PruebaComponent } from './prueba.component';

    @NgModule({
      declarations: [
        PruebaComponent
      ],
      imports: [
        CommonModule,
      ],
      exports: [
        PruebaComponent
      ]

    })
    export class PruebaModule { }

And i have a page named home.page.ts than has a module home-routing.module.ts

home-routing.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { PruebaModule } from 'src/app/componentes/prueba/prueba.module';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    PruebaModule
  ],
  exports: [RouterModule],
  declarations: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageRoutingModule {}

I understood that this was enough to be able to use the component within the page, but it continues presenting the image error.

I appreciate any help you can give me.

Answer 1

Here I guess you got confused between module and routing-module. If you want to use your PruebaComponent in another module then you need to import the PruebaModule in that module. Let's suppose that your module name is home.module.ts then you need to add PruebaModule in home.module.ts and not in home-routing.module.ts

So basically your home.module.ts should look like this.

@NgModule({
imports: [
CommonModule,
PruebaModule]
})
export class HomeModule{ }

and now simply you can use preubaComponent in your home-routing.module.ts So home-routing.module.ts would look something like this.

    const routes: Routes = [{
             path: '',
             component: HomePage}
          ];
  @NgModule({
     imports: [
     RouterModule.forChild(routes)
    ],
     exports: [RouterModule]
     })
  export class HomePageRoutingModule {}

And now you can use the component name in Homepage component. So your homepage.component.html would simply have the below line.

<app-prueba></app-prueba>