Comment importer un composant dans un autre composant Root en Angular 2

Question

J'essaie d'importer un composant d'un fichier à un autre fichier de composant racine. Le message d'erreur est le suivant :

zone.js:484 Unhandled Promise rejection : Erreurs d'analyse du modèle : 'courses' n'est pas un élément connu : 1. Si 'courses' est un composant Angular, vérifiez qu'il fait partie de ce module. 2. Si 'courses' est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@NgModule.schema" de ce composant pour supprimer ce message. ("

Ma première application Angular 2

[ERROR ->]") : AppComponent@0:31 ; Zone : ; Task : Promise.then ; Valeur : Erreur : Erreurs d'analyse de modèle :( ) Erreur : Erreur d'analyse de modèle : 'courses' n'est pas un élément connu :

Mon app.component.ts doit ressembler à [Root component file].

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

et que mon cours.component.ts soit ;

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

En important le composant cours depuis le fichier courses.component.ts dans app.component, je n'arrive pas à déclarer la directive dans le composant. @Component{}

directives:[CoursesComponent] qui me donne une erreur

Veuillez me conseiller une solution à ce problème.

Answer 1

Vous devez le déclarer avec declarations array(meta property) of @NgModule comme indiqué ci-dessous ( RC5 and later ),

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

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

Answer 2

Pour Angular RC5 et RC6, vous devez déclarer le composant dans le décorateur de métadonnées du module. declarations ajoutez donc CoursesComponent dans votre module principal declarations comme ci-dessous et retirer directives de AppComponent métadonnées.

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

Answer 3

Angular RC5 & RC6

Si vous obtenez l'erreur mentionnée ci-dessus dans vos tests Jasmine, c'est très probablement parce que vous devez déclarer le composant non restituable dans votre fichier TestBed.configureTestingModule({}) .

Le TestBed configure et initialise un environnement pour les tests unitaires et fournit des méthodes pour simuler/créer/injecter des composants et des services dans les tests unitaires.

Si vous ne déclarez pas le composant avant l'exécution de vos tests unitaires, Angular ne saura pas ce qu'il faut faire. <courses></courses> se trouve dans votre fichier de modèle.

Voici un exemple :

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();
  });
});

Answer 4

Réponses ci-dessus En mots simples, vous devez vous inscrire sous @NgModule 's

declarations: [
    AppComponent, YourNewComponentHere
  ] 

de app.module.ts

n'oubliez pas de import ce composant.