Angular2 RC6: '<Komponente> ist kein bekanntes Element'

Beim Versuch, meine Angular 2 RC6-App auszuführen, wird in der Browserkonsole die folgende Fehlermeldung angezeigt:

> 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

Ich verstehe nicht, warum die Komponente nicht gefunden wird. Mein PlannerModule sieht folgendermaßen aus:

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

und soweit ich das Konzept der Module in ng2 verstanden habe, werden die Teile der Module in 'Deklarationen' deklariert. Der Vollständigkeit halber hier die PlannerComponent:

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

und die HeaderAreaComponent:

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

Das <header-area>-Tag befindet sich in scheder.component.html:

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

    <div class="row">...

Habe ich etwas falsch gemacht?

Update : Vollständiger Code

planer.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
}

planer.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 {
}

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

Ich habe diesen Fehler erhalten, als ich Modul A in Modul B importiert und dann versucht habe, eine Komponente aus Modul A in Modul B zu verwenden.

Die Lösung besteht darin, diese Komponente im exportsArray zu deklarieren .

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

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

Ich habe es mit Hilfe von Sankets Antwort und den Kommentaren behoben .

Was Sie nicht wissen konnten und in der Fehlermeldung nicht ersichtlich waren, ist: Ich habe die PlannerComponent als @ NgModule.declaration in mein App-Modul (= RootModule) importiert.

Der Fehler wurde behoben, indem das PlannerModule als @ NgModule.imports importiert wurde .

Vor:

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

Nach dem:

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

Danke für Ihre Hilfe :)

Wenn Sie die automatisch generierte Webclipse-Komponentendefinition verwendet haben, wird dem Selektornamen möglicherweise "app-" vorangestellt. Anscheinend ist dies eine neue Konvention beim Deklarieren von Unterkomponenten einer Haupt-App-Komponente. Überprüfen Sie, wie Ihr Selektor in Ihrer Komponente definiert wurde, wenn Sie ihn in Angular IDE mit 'new' - 'component' erstellt haben. Also anstatt zu setzen

<header-area></header-area>

du benötigst vielleicht

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

Ich hole das gleiche Problem für <flash-messages></flash-messages>mit Winkel 5.

Sie müssen nur die folgenden Zeilen in die Datei app.module.ts einfügen

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


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

NB: Ich verwende diesen für Nachrichten- Flash-Nachrichten

In Ihrem Planer Komponente müssen Sie Import fehlen HeaderAreaComponent wie this-

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

Stellen Sie außerdem sicher, dass alle Komponenten und Rohre über ein NgModule deklariert werden müssen .

Sehen Sie, ob dies hilft.

Ich hatte dieses Problem in Angular 7 und das Problem war, dass ich nach dem Erstellen des Moduls keine Leistung erbracht habe ng build. Also habe ich gespielt -

• ng build
• ng serve

und es hat funktioniert.

Der Fehler tritt beim Komponententest auf, wenn die Komponente auf der <router-outlet>Haupt-App-Seite nicht mehr verfügbar ist. Daher sollte die Komponente in der Testdatei wie unten definiert werden.

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

und muss dann in der Datei spec.ts wie unten hinzugefügt werden.

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

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

Eine weitere mögliche Ursache für dieselbe Fehlermeldung ist eine Nichtübereinstimmung zwischen Tag-Name und Selektorname. Für diesen Fall:

<header-area></header-area>Der Tag-Name muss genau mit 'header-area'der Komponentendeklaration übereinstimmen :

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

Ich hatte das gleiche Problem mit Angular RC.6, aus irgendeinem Grund ist es nicht möglich, Komponenten an andere Komponenten zu übergeben, indem Anweisungen als Komponentendekorator an die übergeordnete Komponente verwendet werden

Wenn Sie jedoch die untergeordnete Komponente über das App-Modul importieren und in das Deklarationsarray einfügen, wird der Fehler behoben. Es gibt nicht viele Erklärungen, warum dies ein Problem mit Winkel rc.6 ist

Als ich dieses Problem hatte, lag es daran, dass ich im Decorator 'templateUrl' anstelle von 'template' verwendet habe, da ich Webpack verwende und require darin verwenden muss. Seien Sie vorsichtig mit dem Namen des Dekorateurs. In meinem Fall habe ich den Code für das Boilerplate mithilfe eines Snippets generiert. Der Dekorator wurde wie folgt erstellt:

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

aber für das Webpack sollte der Dekorateur nur ' template ' sein, NICHT ' templateUrl ', wie folgt :

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

dies zu ändern löste das Problem für mich.

Möchten Sie mehr über die beiden Methoden erfahren? Lesen Sie diesen mittleren Beitrag über templatevs.templateUrl

Ich habe diesen Fehler erhalten, als ein Dateiname und eine Klasse nicht übereinstimmend exportiert wurden:

Dateiname: list.component.ts

Klasse exportiert: ListStudentsComponent

Der Wechsel von ListStudentsComponent zu ListComponent hat mein Problem behoben.

Ich bin genau auf dieses Problem gestoßen. Fehlgeschlagen: Fehler beim Analysieren von Vorlagen: 'App-Login' ist kein bekanntes Element ... mitng test . Ich habe alle oben genannten Antworten ausprobiert: Nichts hat funktioniert.

NG TESTLÖSUNG:

Angular 2 Karma Test 'Komponentenname' ist kein bekanntes Element

<= Ich habe Deklarationen für die fehlerhaften Komponenten beforEach(.. declarations[])zu app.component.spec.ts hinzugefügt .

BEISPIEL app.component.spec.ts

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

Ich hatte das gleiche Problem und habe es behoben, indem ich die Komponente (MyComponentToUse) im Export-Array des Moduls hinzugefügt habe, in dem meine Komponente deklariert wurde (ModuleLower). Dann importiere ich ModuleLower in ModuleHigher, damit ich jetzt meine Komponente (MyComponentToUse) in ModuleLower und ModuleHigher wiederverwenden kann

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


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

Ich hatte das gleiche Problem mit Angular 7, als ich das Testmodul durch Deklarieren der Testkomponente verfeinern wollte. Einfach schemas: [ CUSTOM_ELEMENTS_SCHEMA ]wie folgt hinzugefügt und Fehler behoben.

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

Für zukünftige Probleme. Wenn Sie denken, Sie haben alle guten Antworten befolgt und doch ist das Problem da.

Schalten Sie den Server aus und wieder ein.

Ich hatte das gleiche Problem, folgte allen Schritten, konnte es nicht lösen. Schalten Sie aus, ein und es wurde behoben.

Ein Neuling-Fehler erzeugte in meinem Fall die gleiche Fehlermeldung.

Das app-rootTag war in index.html nicht vorhanden

OnInitwurde automatisch in meiner Klasse implementiert, während die ng new ...Schlüsselphrase in der Winkel-CLI zum Generieren der neuen Komponente verwendet wurde. Nachdem ich die Implementierung entfernt und die leere Methode entfernt habe, die generiert wurde, ist das Problem behoben.

Für mich war der Pfad für templateUrl nicht korrekt

Ich habe benutzt

Einkaufsliste-edit.component.html

Während es hätte sein sollen

./shopping-list-edit.component.html

Dummer Fehler, passiert aber beim Start. Hoffe das hilft jemandem in Not.

Späte Antwort für den Thread, aber ich bin sicher, dass es mehr Leute gibt, die diese Informationen aus einer anderen Perspektive verwenden können.

In Ionic werden benutzerdefinierte Winkelkomponenten unter einem separaten Modul namens organisiert ComponentsModule. Wenn die erste Komponente ionic generate componentzusammen mit der Komponente erzeugt wird, erzeugt ionic die ComponentsModule. Alle nachfolgenden Komponenten werden zu Recht demselben Modul hinzugefügt.

Hier ist ein Beispiel 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 {}

Um das ComponentsModulein der App wie alle anderen Winkelmodule nutzen zu können, ComponentsModulesmuss das in das importiert werden AppModule. Die ionische Erzeugungskomponente (Version 4.12) fügt diesen Schritt nicht hinzu, daher muss dieser manuell hinzugefügt werden.

Auszug aus 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, lassen Sie mich die Details des Codes angeben, wie die Komponente eines anderen Moduls verwendet wird.

Zum Beispiel habe ich ein M2-Modul, ein M2-Modul eine comp23-Komponente und eine comp2-Komponente. Jetzt möchte ich comp23 und comp2 in app.module verwenden. So geht's:

das ist app.module.ts, siehe meinen Kommentar,

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

das ist m2 modul:

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

Meine Empfehlung im Code erklärt, was Sie hier tun müssen.

Jetzt können Sie in app.component.html verwenden

  <app-comp23></app-comp23>

Folgen Sie dem Importmodul für ein eckiges Doc- Beispiel