0

tengo un pequeño problema que me está dando dolor de cabeza

Tengo un componente en esta caso llamado Home y un segundo componente llamado Registrate.

Lo que yo requiero es que ese segundo componente pueda ser usado en home, o en cualquier otro componente y según recuerdo la manera clásica de usarlo era en mi componente principal llamar el componente y con el selector cargarlo

<app-registrate></app-registrate>

Pero no logro hacer que funcione, dejo un enlace a stackblitz con la estructura básica de lo que tengo https://stackblitz.com/edit/angular-ivy-rfnyyb?embed=1&file=src/app/shared/registrate/registrate.component.ts

Espero puedan ayudarme

EDITO añadiendo código por si el link llegase a no funcionar:

home.component.html

<h1>A simple h1</h1>
<app-registrate></app-registrate>

home.module.ts

import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { RegistrateModule } from '../../shared/registrate/registrate.module';
import { HomeComponent } from './home.component';
const homeRoute: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
];
@NgModule({
  imports: [
    FormsModule,
    RouterModule.forChild(homeRoute),
    CommonModule,
    RegistrateModule,
  ],
  declarations: [HomeComponent],
  providers: [],
  exports: [RouterModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HomeModule {}

registrate.component.html

<p>Just a text</p>

registrate.module.ts

import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RegistrateComponent } from './registrate.component';

@NgModule({
  imports: [CommonModule],
  declarations: [RegistrateComponent],
  providers: [],
  **exports: [RegistrateComponent],**
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class RegistrateModule {}

Y como comentaron en la respuesta aceptada, solo me faltaba añadir el

exports:[RegistrateComponent]

3
  • Edita tu pregunta para incluir el código en cuestión. Usar enlaces a sitios externos no es conveniente ni bien recibido.
    – Candid Moe
    Commented el 3 oct. 2021 a las 6:09
  • @CandidMoe en este enlace https://es.stackoverflow.com/help/how-to-ask mencionan que es aceptable para poder ver la falla, lo que si se me había ido era meter también parte del código, pero aquí dice que es útil Si es posible crear un ejemplo vivo del problema al que puedas enlazar (por ejemplo, en sqlfiddle.com o jsbin.com) entonces hazlo - pero también incluye el mismo código en tu pregunta. No todos pueden acceder a sitios externos, y los enlaces se pueden quebrar con el tiempo.
    – Sauri Vega
    Commented el 3 oct. 2021 a las 20:11
  • El enlace se refiere a un "ejemplo vivo", es decir, algo ejecutable. La pregunta igual tiene que llevar el código ("pero también incluye el mismo código en tu pregunta"). Por otra parte, tener que ir a mirar el código a un sitio externo quita las ganas de trabajar en la pregunta. Ten eso en mente.
    – Candid Moe
    Commented el 3 oct. 2021 a las 20:49

1 respuesta 1

0

Lo que te hace falta es exportar el componente en el módulo RegistrateModule:

@NgModule({
      imports: [CommonModule],
      declarations: [RegistrateComponent],
      exports:[RegistrateComponent],// exportar el componente
      providers: [],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    export class RegistrateModule {}
1
  • Era justamente esto, muchas gracias
    – Sauri Vega
    Commented el 3 oct. 2021 a las 2:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.