Ionic 4 - How to put a component inside another component/page (nested)

Ionic Framework
#1

Hi:

I’m migrating from 2 to 4 beta.

I want to put a component inside another component and it gives me hard time.

in ionic 2 I could easily put in the html of a page/component the selector of a component I created like so:

and it would work like a charm.

Now it gives me this error:

//----------------------------------------------
ERROR Error: Uncaught (in promise): Error: Template parse errors:
‘my-custom-component’ is not a known element:

  1. If ‘my-custom-component’ is an Angular component, then verify that it is part of this module.
  2. If ‘my-custom-component’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
    //----------------------------------------------

What should I do?

10X in advance:)

#2

hello,
your components from ionic 2 are angular components.
I assume you have created in ionic 4 an angular components too.
If you use visual code, then there are extensions that help with importing.
Import to that module you want integrate the other component the module of your componet like

import {whateverComponentModule} from '.../whatever/whatever.component.module;

add whateverComponentModule to the import section of ngmodule.

Maybe it is nessecarry to restart visual code or similar.

Take a look into your whatever.ts, what your selector is and use it as html tag.

Best regards, anna-liebt

#3

Hן:

Thanks for answering.

About your answer, there is no whatever.component.module file generated in ionic 4 beta.

I added the compomnent like so: (copy paste selector)

Doesn’t work.

What now?

#4

Hello,
maybe you should use ionic generate for creating pages, componets, pipes, etc. This do the most work for you. Copy paste then missing code into the generated files.

You can also add your component to app.module to make it eager loaded.

Best regards, anna-liebt

#5

In your component page module add the component to declarations array:

import { TemplateComponent } from "./templates/component.temp";

@NgModule({
....
declarations: [
TemplateComponent
]
....
});

and component.temp.ts could be like:

import { Component } from "@angular/core";

@Component({
    selector: 'template-component',
    templateUrl: 'component.temp.html'
})

export class TemplateComponent {
    constructor() {
        
    }
}

then, add to your main page component

note: I put .ts and .html templates files on same directory

#6

Hi there, Im having the same issue, In my case I have created a component that is basically a navtab that I want to be placed in numerous pages

navtab.component.html

 <ion-tabs slot="bottom">
   <ion-tab-bar slot="bottom">

     <ion-tab-button tab="anuncios">
       <ion-icon [routerLink]="['/anuncios']" name="notifications"></ion-icon>
       <ion-label>Anuncios</ion-label>
       <ion-badge>6</ion-badge>
     </ion-tab-button>
     <ion-tab-button tab="liturgias">
       <ion-icon [routerLink]="['/lirutgias']" name="albums"></ion-icon>
       <ion-label>Liturgias</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="trabajos">
       <ion-icon [routerLink]="['/trabajos']"name="briefcase"></ion-icon>
       <ion-label>Mis Trabajos</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="galeria">
       <ion-icon [routerLink]="['/galeria']"name="images"></ion-icon>
       <ion-label>Galeria
       </ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>
</div>

Is working fine in my home page, but I created another component called galerias that has these files

galeria.component.html
galeria.component.scss
galeria.component.ts

If only have these files where do I need to put the import of navtabs component?

#7

Why you are not using the default ionic structure ? They are putting ion-tabs in AppComponent