Angular2 RC6: '<componente> no es un elemento conocido'

Recibo el siguiente error en la consola del navegador cuando intento ejecutar mi aplicación Angular 2 RC6:

> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("

    <div class="page-container">
        [ERROR->]<header-area></header-area>
        <div class="container-fluid">

> "): PlannerComponent@1:2

No entiendo por qué no se encuentra el componente. Mi PlannerModule se ve así:

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {}

y hasta donde entendí el concepto de Módulos en ng2, las partes de los módulos se declaran en 'declaraciones'. Para completar, aquí está el PlannerComponent:

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

y el Componente HeaderArea:

@Component({
  selector: 'header-area',
  templateUrl: './header-area.component.html',
  styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}

La <header-area>etiqueta se encuentra en planner.component.html:

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">...

¿Me equivoqué?

Actualización : código completo

planner.module.ts:

import HeaderAreaComponent from '../header-area/header-area.component';
import NavbarAreaComponent from '../navbar-area/navbar-area.component';
import GraphAreaComponent from '../graph-area/graph-area.component';
import EreignisbarAreaComponent from '../ereignisbar-area/ereignisbar-area.component';
import PlannerComponent from './planner.component';
import {NgModule} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {ModalModule} from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
  ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
  ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {
  // TODO: get rid of the "unused class" warning
}

planner.component.ts

import {Component} from '@angular/core';
import CalculationService from '../_shared/services/calculation.service/calculation.service';
import HeaderAreaComponent from '../header-area/header-area.component';

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

planner.component.html

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">
      <div class="col-xs-2 col-sm-1 sidebar">
        <navbar-area></navbar-area>
      </div>
      <div class="col-xs-10 col-sm-11">
        <graph-area></graph-area>
      </div>
    </div><!--/.row-->

    <div class="row">
      <div class="col-xs-10 col-sm-11 offset-sm-1">
        <ereignisbar-area></ereignisbar-area>
      </div>
    </div><!--/.row-->

  </div><!--/.container-->
</div><!--/.page-container-->

Recibí este error cuando importé el Módulo A al Módulo B, y luego intenté usar un componente del Módulo A en el Módulo B.

La solución es declarar ese componente en la exportsmatriz.

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}

@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}

Lo arreglé con la ayuda de la respuesta de Sanket y los comentarios.

Lo que no podía saber y no aparecía en el mensaje de error es: importé el PlannerComponent como una declaración @ NgModule.de en mi módulo de aplicación (= RootModule).

El error se solucionó importando el PlannerModule como @ NgModule.imports .

Antes de:

@NgModule({
  declarations: [
    AppComponent,
    PlannerComponent,
    ProfilAreaComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    GraphAreaComponent,
    EreignisbarAreaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

Después:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Gracias por tu ayuda :)

Si ha utilizado la definición de componente generada automáticamente por Webclipse, puede encontrar que el nombre del selector tiene 'aplicación-' antepuesto. Aparentemente, esta es una nueva convención cuando se declaran subcomponentes de un componente principal de la aplicación. Compruebe cómo se ha definido su selector en su componente si ha usado 'nuevo' - 'componente' para crearlo en IDE angular. Entonces en lugar de poner

<header-area></header-area>

tu puedes necesitar

<app-header-area></app-header-area>

Busco el mismo problema para <flash-messages></flash-messages>angular 5.

Solo necesita agregar las siguientes líneas en el archivo app.module.ts

import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";


@NgModule({
  ---------------
  imports: [
    FlashMessageModule,
    ------------------         
  ], 
  -----------------
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  ------------
})

NB: estoy usando este para mensajes flash de mensajes

En su componente de planificador , debe faltar importar HeaderAreaComponent de esta manera:

import { HeaderAreaComponent } from '../header-area.component'; 
//change path according your project

Además, asegúrese de que todos los componentes y tuberías deben declararse a través de un NgModule .

A ver si esto ayuda.

Estaba enfrentando este problema en Angular 7 y el problema fue después de crear el módulo, no lo hice ng build. Así que realicé

• ng build
• ng serve

Y funcionó.

El error viene en la prueba unitaria, cuando el componente está fuera de la <router-outlet>página principal de la aplicación. Por lo tanto, debe definir el componente en el archivo de prueba como a continuación.

<app-header></app-header>
<router-outlet></router-outlet>

y luego necesita agregar el archivo spec.ts como se muestra a continuación.

import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});

Otra posible causa de tener el mismo mensaje de error es una falta de coincidencia entre el nombre de la etiqueta y el nombre del selector. Para este caso:

<header-area></header-area>El nombre de la etiqueta debe coincidir exactamente con 'header-area'la declaración del componente:

@Component({
  selector: 'header-area',

Tuve el mismo problema con angular RC.6 por alguna razón, no permite pasar componentes a otros componentes usando directivas como decorador de componentes para el componente principal

Pero si importa el componente secundario a través del módulo de la aplicación y lo agrega a la matriz de declaración, el error desaparece. No hay mucha explicación de por qué este es un problema con angular rc.6

Cuando tuve este problema, fue porque usé 'templateUrl' en lugar de solo 'template' en el decorador, ya que uso webpack y necesito usar require en él. Solo tenga cuidado con el nombre del decorador, en mi caso generé el código repetitivo usando un fragmento, el decorador se creó como:

@Component({
  selector: '',
  templateUrl: 'PATH_TO_TEMPLATE'
})

pero para webpack el decorador debería ser simplemente ' template ' NO ' templateUrl ', así:

@Component({
  selector: '',
  template: require('PATH_TO_TEMPLATE')
})

cambiar esto resolvió el problema para mí.

¿Quieres saber más sobre los dos métodos? lea esta publicación mediana sobre templatevstemplateUrl

Recibí este error cuando tenía un nombre de archivo y una clase que no se exportaba:

nombre de archivo: list.component.ts

clase exportada: ListStudentsComponent

Cambiar de ListStudentsComponent a ListComponent solucionó mi problema.

Me encontré con este problema exacto. Falló: errores de análisis de plantilla: 'app-login' no es un elemento conocido ... con ng test. Intenté todas las respuestas anteriores: nada funcionó.

SOLUCIÓN DE PRUEBA NG:

Angular 2 Karma Test 'nombre-componente' no es un elemento conocido

<= Añadí declaraciones para los componentes ofensivos en beforEach(.. declarations[])a app.component.spec.ts .

EJEMPLO app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...

Tuve el mismo problema y lo solucioné agregando el componente (MyComponentToUse) en la matriz de exportaciones en el módulo donde se declaró mi componente (ModuleLower). Luego importo ModuleLower en ModuleHigher, para poder reutilizar ahora mi componente (MyComponentToUse) en ModuleLower y ModuleHigher

            @NgModule({
              declarations: [
                MyComponentToUse
              ],
              exports: [
                MyComponentToUse
              ]
            })
            export class ModuleLower {}


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 

Tuve el mismo problema con Angular 7 cuando voy a refinar el módulo de prueba declarando el componente de prueba. Acabo de agregar schemas: [ CUSTOM_ELEMENTS_SCHEMA ]lo siguiente y se solucionó el error.

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Para futuros problemas. Si cree que siguió todas las buenas respuestas y, sin embargo, el problema está ahí.

Intenta apagar y encender el servidor.

Tuve el mismo problema, seguí todos los pasos, no pude resolverlo. Apague, encienda y se solucionó.

Un error de novato estaba generando el mismo mensaje de error en mi caso.

La app-rootetiqueta no estaba presente en index.html

OnInitse implementó automáticamente en mi clase al usar la ng new ...frase clave en CLI angular para generar el nuevo componente. Entonces, después de eliminar la implementación y eliminar el método vacío que se generó, el problema se resuelve.

Para mí, la ruta para templateUrl no era correcta

Yo estaba usando

shopping-list-edit.component.html

Mientras que debería haber sido

./shopping-list-edit.component.html

Error tonto pero sucede al comenzar. Espero que ayude a alguien en apuros.

Respuesta tardía para el hilo, pero estoy seguro de que hay más personas que pueden usar esta información explicada desde otra perspectiva.

En Ionic, los componentes angulares personalizados se organizan en un módulo separado llamado ComponentsModule. Cuando se genera el primer componente usando ionic generate component, junto con el componente, iónico genera el ComponentsModule. Cualquier componente posterior se agrega al mismo módulo, con razón.

Aquí hay una muestra ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

Para usar el ComponentsModuleen la aplicación, como cualquier otro módulo angular, ComponentsModulesdebe importarse al AppModule. El componente de generación iónica (v 4.12) no agrega este paso, por lo que debe agregarse manualmente.

Extracto de AppModule:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Ok, déjenme dar los detalles del código, cómo usar el componente de otro módulo.

Por ejemplo, tengo el módulo M2, el módulo M2 tiene el componente comp23 y el componente comp2, ahora quiero usar comp23 y comp2 en app.module, así es como:

esto es app.module.ts, mira mi comentario,

 // import this module's ALL component, but not other module's component, only this module
  import { AppComponent } from './app.component';
  import { Comp1Component } from './comp1/comp1.component';

  // import all other module,
 import { SwModule } from './sw/sw.module';
 import { Sw1Module } from './sw1/sw1.module';
 import { M2Module } from './m2/m2.module';

   import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';


 @NgModule({

    // declare only this module's all component, not other module component.  

declarations: [
AppComponent,
Comp1Component,


 ],

 // imports all other module only.
imports: [
BrowserModule,
SwModule,
Sw1Module,
M2Module,
CustomerDashboardModule // add the feature module here
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Este es el módulo m2:

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   // must import this module's all component file
   import { Comp2Component } from './comp2/comp2.component';
   import { Comp23Component } from './comp23/comp23.component';

   @NgModule({

   // import all other module here.
     imports: [
       CommonModule
     ],

    // declare only this module's child component. 
     declarations: [Comp2Component, Comp23Component],

   // for other module to use these component, must exports
     exports: [Comp2Component, Comp23Component]
   })
   export class M2Module { }

Mi recomendación en el código explica lo que debe hacer aquí.

ahora en app.component.html, puedes usar

  <app-comp23></app-comp23>

siga el módulo de importación de muestras de documentación angular