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

title angular 6

Question

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 componente Planner:

@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 etiqueta <header-area> 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-->

Answer 1

Busco el mismo problema para <flash-messages></flash-messages> con 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-messages

Answer 2

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:

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

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

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


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

cambiar esto resolvió el problema para mí.

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

Answer 3

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

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

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

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

Answer 4

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.

Answer 5

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

• ng build
• ng serve

Y funcionó.

Answer 6

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 :)

Answer 7

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

<= beforEach(.. declarations[]) declaraciones para los componentes infractores en beforEach(.. declarations[]) a app.component.spec.ts .

EJEMPLO app.component.spec.ts

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

Answer 8

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

Answer 9

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> nombre de la etiqueta <header-area></header-area> debe coincidir exactamente con el ''header-area'' de la declaración del componente:

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

Answer 10

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ó.

Answer 11

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.

Answer 12

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

Era una cuestión de declarar ese componente en mi matriz de exports .

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

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

Answer 13

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.

Answer 14

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 utilizado ''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>

Answer 15

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 ] siguiente manera y se solucionó el error.

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

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

Answer 16

Tuve el mismo problema con angular RC.6 por alguna razón, no permite pasar componentes a otro componente 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

Answer 17

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

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

Answer 18

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

La etiqueta app-root no estaba presente en index.html

Answer 19

OnInit se implementó automáticamente en mi clase mientras usaba la frase clave ng new ... en la 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.

Answer 20

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 el primer componente se genera utilizando el 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 de 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 ComponentsModule en la aplicación, como cualquier otro módulo angular, los ComponentsModules deben importarse a 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 {}