1

Estoy desarrollando una característica para mi aplicación Angular que requiere de varios modals, todos ellos funcionan, pero estoy teniendo problemas para crear uno de estos, hace tiempo que no toco esta aplicación y no veo que se me está pasando.

Pasos realizados para crear el modal:

cd ./components/modals
ng generate component CustomModalComponent

Hasta aquí el IDE no me da ningún error, pero cuando intento lanzarlo de la siguiente forma:

let modalOptions = {
  size: lg,
  windowClass: 'modal-content-no-border',
  animated: true
  };

let modalRef = this.modalService.open(CustomModalComponent, modalOptions);
modalRef.componentInstance.var = myVar;
modalRef.result.then(result =>{
  console.log(result);
}

Tal y como está, sin modificar nada más me da el siguiente error en consola al intentar abrirlo:

ERROR Error: No component factory found for CustomModalComponent. Did you add it to @NgModule.entryComponents?

En caso de añadir el componente al app.module.ts de la siguiente manera:

@NgModule({
  declarations:[
    AppComponent,
    CustomModalComponent,
  ],
  imports:[
    ... //default
  ]
  providers: [{
    ... //default
  }],
  [
}

export class AppModule {}

Me genera los siguientes errores: Angular CLI:

Type CustomModalComponent in D:/.../.../.../src/app/layout/components/modals/custom-modal/custom-modal.component.ts is part of the declarations of 2 modules: AppModule in D:/.../.../.../src/app/app.module.ts and LayoutModule in D:/.../.../.../src/app/layout/layout.module.ts! Please consider moving CustomModalComponent in D:/.../.../.../src/app/layout/components/modals/custom-modal/custom-modal.component.ts to a higher module that imports AppModule in D:/.../.../.../src/app/app.module.ts and LayoutModule in D:/.../.../.../src/app/layout/layout.module.ts. You can also create a new NgModule that exports and includes CustomModalComponent in D:/.../.../.../src/app/layout/components/modals/custom-modal/custom-modal.component.ts then import that NgModule in AppModule in D:/.../.../.../src/app/app.module.ts and LayoutModule in D:/.../.../.../src/app/layout/layout.module.ts.

Y en el propio IDE me resalta el siguiente error:

The Component 'CustomModalComponent' is declared by more than one NgModule. Que no tiene sentido para mí porque el componente en este punto está declarado una única vez, que yo sepa.

Por lo que entiendo que me he saltado un paso o he hecho algo mal a la hora de crear el componente para usarlo como modal.

1
  • Qué versión estás usando de Angular? el 22 oct. 2021 a las 11:27

1 respuesta 1

1

El error ha resultado ser que había un módulo secundario donde se hacían las declaraciones de los componentes.

En este caso, tras añadir el componente en las declaraciones de layout.module.ts de la siguiente manera se ha solucionado.

@NgModule({
  declarations: [
    ...,
    CustomModalComponent,
  ],
  imports: [
    ... //default
  ]
  providers: [{
    ... //default
  }],
  [
}

export class LayoutComponent {}

Tu Respuesta

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

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