Quería crear un componente simple e incluirlo en una página. Lo creé con ionic g component my-header (ionic-cli v3 beta), arreglé el error de IonicPageModule y luego lo agregué a otra página. Entonces me sale este error:
Error: Uncaught (in promise): Error: Template parse errors: 'my-header' is not a known element: 1. If 'my-header' is an Angular component, then verify that it is part of this module. 2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.El "MyHeaderComponent" se agregó automáticamente a las declaraciones de @NgModule.
Gracias por tu ayuda.
EDITAR:
El componente se encuentra dentro de mi carpeta components :
componentes/mi-encabezado/mi-encabezado.html
<div> {{text}} </div>componentes/mi-cabecera/mi-cabecera.module.ts
import { NgModule } from '@angular/core'; import { IonicModule } from 'ionic-angular'; import { MyHeaderComponent } from './my-header'; @NgModule({ declarations: [ MyHeaderComponent, ], imports: [ IonicModule, ], exports: [ MyHeaderComponent ], entryComponents:[ MyHeaderComponent ] }) export class MyHeaderComponentModule {}componentes/mi-encabezado/mi-encabezado.scss
my-header {}componentes/mi-encabezado/mi-encabezado.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-header', templateUrl: 'my-header.html' }) export class MyHeaderComponent { text: string; constructor() { console.log('Hello MyHeaderComponent Component'); this.text = 'Hello World'; } }aplicación/aplicación.módulo.ts
/* imports */ import { MyHeaderComponent } from '../components/my-header/my-header'; @NgModule({ declarations: [ MyApp, MyHeaderComponent ], ...páginas/inicio/inicio.html
Dado que ionic 3 admite la carga diferida, no necesita importar su componente personalizado en la aplicación. archivo módulo.ts. En su lugar, puede importarlo en el archivo module.ts de una página específica. Por ejemplo: si desea utilizar su componente personalizado en su página de inicio, puede importarlo en su archivo home.module.ts como se indica a continuación:
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { HomePage } from './home'; import { MyHeaderComponent }from '../../components/myheader/myheader'; @NgModule({ declarations: [ HomePage, MyHeaderComponent ], imports: [ IonicPageModule.forChild(HomePage), ], exports: [ HomePage, ] }) export class HomePageModule { }Sin embargo, no olvide eliminar su importación y declaraciones del archivo app.module.ts que se agrega automáticamente cuando crea su componente personalizado.
No tiene que importar MyHeaderComponent en ngModule.
Debe importar MyHeaderComponentModule en su módulo de página donde quiera usar esto.
imports: [ MyHeaderComponentModule, ],Respuesta tardía para el hilo, pero estoy seguro de que hay más personas que pueden usar esta información explicada en otra perspectiva.
En Ionic, los componentes angulares personalizados se organizan en un módulo separado llamado ComponentsModule . Cuando el primer componente se genera mediante ionic generate component , junto con el componente, ionic genera el ComponentsModule . Cualquier componente posterior se agrega al mismo módulo, con razón.
Aquí hay un módulo de ComponentsModule de muestra
import { NgModule } from '@angular/core'; import { CustomAngularComponent } from './custom/custom-angular-component'; import { IonicModule } from 'ionic-angular'; @NgModule({ declarations: [CustomAngularComponent], imports: [IonicModule], exports: [CustomAngularComponent], entryComponents:[ ] }) export class ComponentsModule {} Para usar el Módulo de ComponentsModule en la aplicación, como cualquier otro módulo angular, los Módulos de ComponentsModules deben importarse al AppModule de aplicación. El componente de generación iónica (v 4.12) no agrega este paso, por lo que debe agregarse manualmente.
Extracto de AppModule:
@NgModule({ declarations: [ //declaration ], imports: [ //other modules ComponentsModule, ], bootstrap: [IonicApp], entryComponents: [ //ionic pages ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, //other providers ] }) export class AppModule {}