Wie man eine Komponente in eine andere Wurzelkomponente in Angular 2 importiert

Ich versuche zu importieren-Komponente aus einer Datei einen anderen root-Element-Datei.
es Fehler geben ..

zone.js:484 Unbehandelte Versprechen Ablehnung: Template-parsing-Fehler:
'Kurse' ist kein element bekannt:
1. Wenn 'Kursen' ist ein Winkel-Komponente, dann stellen Sie sicher, dass es ist Teil dieses Moduls.
2. Wenn 'Kursen' ist eine Web-Komponente, und klicken hinzufügen "CUSTOM_ELEMENTS_SCHEMA" '@NgModule.schema' dieser Komponente zu unterdrücken Sie diese Meldung. ("

Meine Erste Eckige 2-App

[FEHLER ->]"): AppComponent@0:31 ; Zone: ; Aufgabe: Versprechen.dann ; Wert: Fehler: Template-parsing-Fehler:(...) Fehler: Template-parsing-Fehler:
'Kurse' ist kein element bekannt:

Meine app.Komponente.ts wie [root component-Datei]

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><courses></courses>',
  directives:[CoursesComponent],
})

export class AppComponent { }

und meine Kurse.Komponente.ts werden ;

import { Component } from '@angular/core';
@Component({
  selector: 'courses',
  template: '<h1>courses</h1>'
})
export class CoursesComponent { }

beim importieren von Lehrveranstaltungen Bestandteil von Lehrveranstaltungen.Komponente.ts-Datei innerhalb der app.Komponente kann ich nicht erklären-Richtlinie innerhalb @Component{}

directives:[CoursesComponent] gibt Fehler zu mir

Bitte beraten-Lösung über.

InformationsquelleAutor der Frage Vishu | 2016-09-09

  1. 53

    Sollten Sie erklären es mit declarations array(meta property) of @NgModule wie unten gezeigt (RC5 and later),

    import {CoursesComponent} from './courses.component';

@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent,CoursesComponent],  //<----here
  providers:    [],      
  bootstrap:    [ AppComponent ]
})

    InformationsquelleAutor der Antwort micronyks

  2. 32

    Eckige RC5 und RC6 Sie haben zu erklären Komponente im Modul Metadaten Dekorator declarations Schlüssel, so fügen Sie CoursesComponent in deinem main-Modul declarations als unten und entfernen Sie directives aus AppComponent Metadaten.

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, CoursesComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

    InformationsquelleAutor der Antwort ranakrunal9

  3. 12

    Winkel-RC5 & RC6

    Wenn Sie die oben genannten Fehler in Ihrem Jasmine-tests, ist es wahrscheinlich, weil Sie haben, zu erklären, das unrenderable Komponente in Ihrem TestBed.configureTestingModule({}).

    Das TestBed konfiguriert und initialisiert eine Umgebung für die unit-Tests und stellt Methoden für Spott/erstellen/Injektion-Komponenten und-Dienste in unit-tests.

    Wenn Sie nicht deklarieren Sie die Komponente, bevor Sie Ihre unit-tests ausgeführt werden, Winkel wird nicht wissen, was <courses></courses> ist in Ihrer Vorlage-Datei.

    Hier ist ein Beispiel: 

    import {async, ComponentFixture, TestBed} from "@angular/core/testing";
import {AppComponent} from "../app.component";
import {CoursesComponent} from './courses.component';

describe('CoursesComponent', () => {
  let component: CoursesComponent;
  let fixture: ComponentFixture<CoursesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CoursesComponent
      ],
      imports: [
        BrowserModule
        //If you have any other imports add them here
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CoursesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

    InformationsquelleAutor der Antwort Emil Pedersen

  4. 6

    oben Antworten In einfachen Worten,
    Sie haben sich unter @NgModule's 

    declarations: [
    AppComponent, YourNewComponentHere
  ]

    des app.module.ts

    vergessen Sie nicht import Komponente.

    InformationsquelleAutor der Antwort Extreme

Schreibe einen Kommentar