example - router events angular 6

Componente personalizado en viónico v3.

Question

Quería crear un componente simple e incluirlo en una página. Lo creé con el ionic g component my-header (ionic-cli v3 beta), arreglé el error IonicPageModule y luego lo añadí 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ó a las declaraciones de @NgModule automáticamente.

Gracias por tu ayuda.

EDITAR:

El componente se encuentra dentro de mi carpeta de components :

componentes / my-header / my-header.html

<div>
  {{text}}
</div>

componentes / my-header / my-header.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 / my-header / my-header.scss

my-header {}

componentes / my-header / my-header.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'';
  }

}

app / app.module.ts

/* imports */
import { MyHeaderComponent } from ''../components/my-header/my-header'';

@NgModule({
  declarations: [
    MyApp,
    MyHeaderComponent
  ],
...

pages / home / home.html

Answer 1

Aquí está mi módulo. Espero que te ayude a responder tu pregunta:

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})

Answer 2

Dado que ionic 3 admite la carga diferida, no necesita importar su componente personalizado en la aplicación. archivo module.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, simplemente 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 al crear su componente personalizado.

Answer 3

Debe importar el componente en el módulo. Asegúrese de que también exporta ese componente.

@NgModule({
    imports: [
        IonicModule,
    ],
    declarations:[
        MyHeaderComponent
    ],
    exports:[
        MyHeaderComponent
    ],
    entryComponents:[
        MyHeaderComponent
    ]

})

Answer 4

No es necesario importar MyHeaderComponent en ngModule.

Debe importar MyHeaderComponentModule en el módulo de su página donde desee usar esto.

 imports: [
    MyHeaderComponentModule,
  ],

Answer 5

Solo para aclarar: estoy usando un componente navigator personalizado en muchas páginas (componente reutilizable).

import { NgModule } from ''@angular/core'';
import { IonicPageModule } from ''ionic-angular'';
import { TranslateModule } from ''@ngx-translate/core'';
import { PipesModule } from ''../../pipes/PipesModule'';
import { NavigatorComponent } from ''../../components/navigator/navigator'';
import { ComponentsModule } from ''../../components/components.module'';
import { NavigatorComponentModule } from ''../../components/navigator/navigator.module'';

@NgModule({
  declarations: [
    TestPage,

  ],
  imports: [
    IonicPageModule.forChild(EntriesPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule

  ],
  exports: [
   TestPage,

  ],
  providers:[
    NavigatorComponent
  ]
})
export class TestPageModule {}

Nota: el navigatorComponent tiene 4 archivos: ts, css, html y yourcomponentname.module.ts. El comando "componente g iónico" no genera el último archivo (yourcomponentname.module.ts). Así que lo hice.

Answer 6

Respuesta tardía para el hilo, pero estoy seguro de que hay más personas que pueden usar esta información explicada desde otra perspectiva.

En Ionic, los componentes angulares personalizados se organizan bajo un módulo separado llamado ComponentsModule . Cuando el primer componente se genera utilizando 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 una muestra de ComponentsModule

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 ComponentsModule en la aplicación, como cualquier otro módulo angular, los ComponentsModules deben importarse al AppModule . El componente generador iónico (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 {}