Búsqueda de sitios web

typescript - Componente personalizado no se muestra en Ionic v4 + Angular 6


Estoy intentando agregar un componente personalizado a mi aplicación web Ionic v4. Creo que me falta algo pero no sé qué. La consola no muestra errores, pero el componente parece que nunca se usa (también intenté algunos registros dentro del .ts del componente y nunca se imprimen en la consola). Aquí está el código:

en app/components/custom-component/custom-component.component.html

<p>
  my custom-component works!
</p>

en app/components/custom-component/custom-component.component.ts

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CustomComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}

en app/components/components.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomComponentComponent } from './custom-component/custom-component.component';

@NgModule({
  imports : [
    CommonModule,
    IonicModule.forRoot(),
  ],
  declarations: [
    ProgressBarComponent,
    CustomComponentComponent],
    exports: [CustomComponentComponent, ProgressBarComponent],
  entryComponents: [],
})
export class ComponentsModule {}

Luego utilizo el componente personalizado en mi página de inicio así:

en app/home/home.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { ComponentsModule } from '../components/components.module';

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

y en app/home/home.page.html

<ion-content>
--> <app-custom-component></app-custom-component> <--
</ion-content>

Lanzo la aplicación con el comando ionic serve, y ese es el resultado

Como puedes ver, no hay errores en la consola, pero el contenido del componente no se muestra. ¿Qué me estoy perdiendo? Gracias

Respuesta #1

Como sugirió el usuario jjdev en forum.ionicframework.com

Intenta incluir CustomComponentComponent en el array ‘entryComponents’ en el ComponentsModule

Eso resolvió el problema. Gracias a la comunidad de Ionic Framework