Usar componente de otro módulo

Esta sección fue evaluado por nuestros expertos así garantizamos la veracidad de nuestra esta reseña.

Solución:

La regla principal aquí es que:

Los selectores que son aplicables durante la compilación de una plantilla de componente están determinados por el módulo que declara ese componente y el cierre transitivo de las exportaciones de las importaciones de ese módulo.

Entonces, intenta exportarlo:

@NgModule(
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] <== this line
)
export class TaskModule

¿Qué debo exportar?

Exporte clases declarables a las que los componentes de otros módulos deberían poder hacer referencia en sus plantillas. Estas son tus clases públicas. Si no exporta una clase, permanece privada, visible solo para otros componentes declarados en este módulo.

En el momento en que crea un nuevo módulo, perezoso o no, cualquier módulo nuevo y declara algo en él, ese nuevo módulo tiene un estado limpio(como dijo Ward Bell en https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2)

Angular crea módulo transitivo para cada uno de @NgModules.

este modulo recopila directivas que se importaron de otro módulo (si el módulo transitivo del módulo importado tiene directivas exportadas) o se declararon en el módulo actual.

Cuando angular compila la plantilla que pertenece al módulo X se utilizan aquellas directivas que habían sido recogidas en X.transitiveModule.directives.

compiledTemplate = new CompiledTemplate(
    false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

De esta manera de acuerdo con la imagen de arriba

• YComponent no puedo usar ZComponent en su plantilla porque directives array de Transitive module Y no contiene ZComponent porque YModule no ha importado ZModule cuyo módulo transitivo contiene ZComponent en exportedDirectives array.

• Dentro de XComponent plantilla que podemos usar ZComponent porque Transitive module X tiene directivas array eso contiene ZComponent porque
  XModule módulo de importaciones (YModule) que exporta el módulo (ZModule) que directiva de exportaciones ZComponent

• Dentro de AppComponent plantilla que no podemos usar XComponent porque AppModule importaciones XModule pero XModule no exporta XComponent.

Ver también

• ¿Por qué el módulo con carga diferida tiene que importar commonModule? Angular 2

• Preguntas frecuentes sobre el módulo angular

• ¿Cuál es la diferencia entre declaraciones, proveedores e importación en NgModule?

(Angular 2 - Angular 7)

El componente se puede declarar en un solo módulo solamente. Para usar un componente de otro módulo, debe realizar dos tareas simples:

1. Exportar el componente en el otro módulo
2. Importar el otro módulo, en el módulo actual

1er Módulo:

Tener un componente (vamos a llamarlo: "ImportantCopmonent"), queremos reutilizarlo en la página del 2do Módulo.

@NgModule(
declarations: [
    FirstPage,
    ImportantCopmonent // <-- Enable using the component html tag in current module
],
imports: [
  IonicPageModule.forChild(NotImportantPage),
  TranslateModule.forChild(),
],
exports: [
    FirstPage,
    ImportantCopmonent // <--- Enable using the component in other modules
  ]
)
export class FirstPageModule  

---

2do Módulo:

Reutiliza el "ImportantCopmonent", importando FirstPageModule

@NgModule(
declarations: [
    SecondPage,
    Example2ndComponent,
    Example3rdComponent
],
imports: [
  IonicPageModule.forChild(SecondPage),
  TranslateModule.forChild(),
  FirstPageModule // <--- this Imports the source module, with its exports
], 
exports: [
    SecondPage,
]
)
export class SecondPageModule  

Tienes que export de tu NgModule:

@NgModule(
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []
)
export class TaskModule

Comentarios y valoraciones

Si para ti ha sido útil nuestro post, sería de mucha ayuda si lo compartes con más desarrolladores de esta forma nos ayudas a extender este contenido.

---

---

Utiliza Nuestro Buscador