crear - comunicacion entre componentes angular 6

Angular 2 ''componente'' no es un elemento conocido

Question

Estoy tratando de usar un componente que creé dentro del AppModule en otros módulos. Sin embargo, aparece el siguiente error:

"No capturado (en promesa): Error: errores de análisis de plantilla:

''contact-box'' no es un elemento conocido:

1. Si ''caja de contactos'' es un componente angular, verifique que sea parte de este módulo.
2. Si ''contact-box'' es un componente web, agregue ''CUSTOM_ELEMENTS_SCHEMA'' al ''@ NgModule.schemas'' de este componente para suprimir este mensaje.

La estructura de mi proyecto es bastante simple:

Mantengo mis páginas en el directorio de páginas, donde cada página se mantiene en un módulo diferente (por ejemplo, módulo de clientes) y cada módulo tiene múltiples componentes (como componente de lista de clientes, componente de agregar clientes, etc.). Quiero usar mi ContactBoxComponent dentro de esos componentes (por ejemplo, dentro de los clientes-agregar-componente).

Como puede ver, creé el componente de cuadro de contactos dentro del directorio de widgets, por lo que básicamente está dentro del AppModule. Agregué la importación ContactBoxComponent a app.module.ts y la puse en la lista de declaraciones de AppModule. No funcionó, así que busqué en Google mi problema y agregué ContactBoxComponent a la lista de exportación también. No ha ayudado También intenté poner ContactBoxComponent en CustomersAddComponent y luego en otro (de un módulo diferente) pero recibí un error que indica que hay varias declaraciones.

¿Qué me estoy perdiendo?

Answer 1

Acabo de tener exactamente el mismo problema. Antes de probar algunas de las soluciones publicadas aquí, es posible que desee comprobar si el componente realmente no funciona. Para mí, el error se mostró en mi IDE (WebStorm), pero resultó que el código funcionó perfectamente cuando lo ejecuté en el navegador.

Después de cerrar la terminal (que estaba ejecutando ng serve) y reiniciar mi IDE, el mensaje dejó de aparecer.

Answer 2

El problema en mi caso era la falta de declaración de componente en el módulo, pero incluso después de agregar la declaración, el error persistió. Tenía que detener el servidor y reconstruir todo el proyecto en VS Code para que el error desapareciera.

Answer 3

En mi caso, mi aplicación tenía varias capas de módulos, por lo que el módulo que estaba tratando de importar debía agregarse al módulo principal que realmente lo usaba pages.module.ts , en lugar de app.module.ts .

Answer 4

Estos son los 5 pasos que realizo cuando recibo tal error.

• ¿Estás seguro de que el nombre es correcto? (también verifique el selector definido en el componente)
• ¿Declarar el componente en un módulo?
• Si está en otro módulo, ¿exportar el componente?
• Si está en otro módulo, ¿importar ese módulo?
• ¿Reiniciar el cli?

También intenté poner ContactBoxComponent en CustomersAddComponent y luego en otro (de un módulo diferente) pero recibí un error que indica que hay varias declaraciones.

No puede declarar un componente dos veces. Debe declarar y exportar su componente en un nuevo módulo separado. A continuación, debe importar este nuevo módulo en cada módulo que desee utilizar su componente.

Es difícil saber cuándo debe crear un nuevo módulo y cuándo no. Por lo general, creo un nuevo módulo para cada componente que reutilizo. Cuando tengo algunos componentes que uso en casi todas partes, los pongo en un solo módulo. Cuando tengo un componente que no reutilizo, no crearé un módulo separado hasta que lo necesite en otro lugar.

Aunque puede ser tentador poner todos sus componentes en un solo módulo, esto es malo para el rendimiento. Durante el desarrollo, un módulo tiene que volver a compilarse cada vez que se realizan cambios. Cuanto más grande es el módulo (más componentes), más tiempo lleva. Hacer un pequeño cambio en un módulo grande lleva más tiempo que hacer un pequeño cambio en un módulo pequeño.

Answer 5

Tengo el mismo problema ancho php storm versión 2017.3. Esto lo soluciono para mí: foro de soporte intellij

Fue un error de ancho en el servicio de idioma angular: https://www.npmjs.com/package/@angular/language-service

Answer 6

Tuve el mismo problema, y ​​estaba sucediendo debido a que el módulo de características diferentes incluyó este componente por error. Cuando lo eliminó de la otra característica, ¡funcionó!

Answer 7

Tuve un problema similar. Resultó que el ng generate component (usando CLI versión 7.1.4) agrega una declaración para el componente secundario al AppModule, pero no al módulo TestBed que lo emula.

La aplicación de ejemplo "Tour of Heroes" contiene un HeroesComponent con selector de app-heroes . La aplicación funcionó bien cuando se sirvió, pero ng test produjo este mensaje de error: ''app-heroes'' is not a known element . Agregar HeroesComponent manualmente a las declaraciones en configureTestingModule (en app.component.spec.ts ) elimina este error.

describe(''AppComponent'', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it(''should create the app'', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}