Angular2 RC6: '<componente> non è un elemento noto'

Ricevo il seguente errore nella console del browser quando provo a eseguire la mia app 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

Non capisco perché il componente non sia stato trovato. Il mio PlannerModule è simile al seguente:

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

e per quanto ho capito il concetto di moduli in ng2, le parti dei moduli sono dichiarate in "dichiarazioni". Per completezza, ecco il componente Planner:

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

e HeaderAreaComponent:

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

Il <header-area>-Tag si trova nel planner.component.html:

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

    <div class="row">...

Ho sbagliato qualcosa?

Aggiornamento : codice 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-->

Ho ricevuto questo errore quando ho importato il modulo A nel modulo B e quindi ho provato a utilizzare un componente dal modulo A nel modulo B.

La soluzione è dichiarare quel componente in exports matrice.

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

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

L'ho risolto con l'aiuto della risposta di Sanket e dei commenti.

Quello che non si poteva sapere e che non era evidente nel messaggio di errore è: Ho importato PlannerComponent come @ NgModule.declaration nel mio modulo app (= RootModule).

L'errore è stato corretto importando PlannerModule come @ NgModule.imports .

Prima:

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

Dopo:

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

Grazie per l'aiuto :)

Se hai utilizzato la definizione del componente generata automaticamente da Webclipse, potresti scoprire che il nome del selettore ha 'app-' anteposto ad esso. Apparentemente questa è una nuova convenzione quando si dichiarano i sottocomponenti di un componente principale dell'app. Controlla come il tuo selettore è stato definito nel tuo componente se hai usato "nuovo" - "componente" per crearlo in IDE angolare. Quindi invece di mettere

<header-area></header-area>

Potresti aver bisogno

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

Prendo lo stesso problema <flash-messages></flash-messages>con 5 angolari.

Devi solo aggiungere le righe seguenti nel file app.module.ts

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


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

NB: Sto usando questo per i messaggi flash

Nel vostro pianificatore componente, è necessario essere mancante di importazione HeaderAreaComponent come questo-

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

Inoltre, assicurarsi che: tutti i componenti e i tubi devono essere dichiarati tramite un modulo Ng .

Vedi se questo aiuta.

Stavo affrontando questo problema su Angular 7 e il problema era che dopo aver creato il modulo, non ho eseguito ng build. Quindi mi sono esibito -

• ng build
• ng serve

e ha funzionato.

Errore nel test unitario, quando il componente non è presente <router-outlet>nella pagina dell'app principale. quindi dovrebbe definire il componente nel file di test come di seguito.

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

e quindi deve aggiungere il file spec.ts come di seguito.

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

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

Un'altra possibile causa di avere lo stesso messaggio di errore è una mancata corrispondenza tra il nome del tag e il nome del selettore. Per questo caso:

<header-area></header-area>il nome del tag deve corrispondere esattamente 'header-area'alla dichiarazione del componente:

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

Ho avuto lo stesso problema con RC.6 angolare per qualche motivo che non consente il passaggio di componenti ad altri componenti utilizzando le direttive come decoratore di componenti al componente padre

Ma se si importa il componente figlio tramite il modulo app e lo si aggiunge nell'array di dichiarazioni, l'errore scompare. Non ci sono molte spiegazioni al perché questo è un problema con angular rc.6

Quando ho avuto questo problema, è stato perché ho usato 'templateUrl' invece di 'template' nel decoratore, dal momento che uso il webpack e ho bisogno di usare richiedono in esso. Fai solo attenzione con il nome del decoratore, nel mio caso ho generato il codice del boilerplate usando uno snippet, il decoratore è stato creato come:

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

ma per il webpack il decoratore dovrebbe essere solo " template ' NON ' templateUrl ', in questo modo:

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

cambiando questo ho risolto il problema per me.

vuoi saperne di più sui due metodi? leggi questo post medio su templatevstemplateUrl

Ho ricevuto questo errore quando avevo un nome file e una classe non corrispondenti esportati:

nome file: list.component.ts

classe esportata: ListStudentsComponent

Il passaggio da ListStudentsComponent a ListComponent ha risolto il mio problema.

Ho riscontrato questo esatto problema. Non riuscito: errori di analisi del modello: "app-login" non è un elemento noto ... conng test . Ho provato tutte le risposte sopra: niente ha funzionato.

SOLUZIONE TEST NG:

Il test Karma Angular 2 'nome-componente' non è un elemento noto

<= Ho aggiunto le dichiarazioni per i componenti offendere in beforEach(.. declarations[])a app.component.spec.ts .

ESEMPIO app.component.spec.ts

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

Ho avuto lo stesso problema e ho risolto aggiungendo il componente (MyComponentToUse) nell'array export nel modulo in cui è stato dichiarato il mio componente (ModuleLower). Quindi importare ModuleLower in ModuleHigher, quindi posso riutilizzare ora il mio componente (MyComponentToUse) in ModuleLower e ModuleHigher

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


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

Ho avuto lo stesso problema con Angular 7 quando ho intenzione di perfezionare il modulo di test dichiarando il componente di test. Appena aggiunto schemas: [ CUSTOM_ELEMENTS_SCHEMA ]come segue e l'errore è stato risolto.

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

Per problemi futuri. Se pensi di aver seguito tutte le risposte valide, eppure, il problema è lì.

Prova a spegnere e riaccendere il server.

Ho avuto lo stesso problema, ho seguito tutti i passaggi, non sono riuscito a risolverlo. Spegni, accendi ed è stato risolto.

Un errore da principiante stava generando lo stesso messaggio di errore nel mio caso.

Il app-roottag non era presente in index.html

OnInitè stato implementato automaticamente sulla mia classe mentre utilizzavo la ng new ...frase chiave sulla CLI angolare per generare il nuovo componente. Quindi, dopo aver rimosso l'implementazione e rimosso il metodo vuoto che è stato generato, il problema viene risolto.

Per me il percorso per templateUrl non era corretto

Stavo usando

lo shopping-list-edit.component.html

Considerando che avrebbe dovuto essere

./shopping-list-edit.component.html

Errore sciocco ma succede quando si inizia. Spero che aiuti qualcuno in difficoltà.

Risposta in ritardo per il thread, ma sono sicuro che ci sono più persone che possono utilizzare queste informazioni spiegate in un'altra prospettiva.

In Ionico, i componenti angolari personalizzati sono organizzati in un modulo separato chiamato ComponentsModule. Quando il primo componente viene generato usando ionic generate component, insieme al componente, ionico genera il ComponentsModule. Qualsiasi componente successivo viene aggiunto allo stesso modulo, giustamente.

Ecco un esempio 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 {}

Per utilizzare l' ComponentsModuleapp, come qualsiasi altro modulo angolare, è ComponentsModulesnecessario importare in AppModule. componente di generazione ionica (v 4.12) non aggiunge questo passaggio, quindi deve essere aggiunto manualmente.

Estratto di 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, lasciami dare i dettagli del codice, come usare il componente di un altro modulo.

Ad esempio, ho un modulo M2, il modulo M2 ha un componente comp23 e un componente comp2, Ora voglio usare comp23 e comp2 in app.module, ecco come:

questo è app.module.ts, vedi il mio commento,

 // 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 { }

questo è il modulo 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 { }

Il mio encomio nel codice spiega cosa devi fare qui.

ora in app.component.html, puoi usare

  <app-comp23></app-comp23>

seguire il modulo di importazione campione angolare doc