web-dev-qa-db-fra.com

Comment importer un composant dans un autre composant racine dans Angular 2

J'essaie d'importer un composant d'un fichier à un autre fichier de composant racine. ça donne une erreur comme ..

zone.js: 484 Rejet de la promesse non gérée: erreurs d'analyse de modèle: "cours" n'est pas un élément connu: 1. Si "cours" est un composant Angular, vérifiez qu'il fait partie de ce module. 2. Si "cours" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schema" de ce composant pour supprimer ce message. ("

Ma première Angular 2 application

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

Mon app.component.ts être comme [fichier de composant racine]

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 mes cours.component.ts être;

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

lors de l'importation d'un composant de cours à partir du fichier courses.component.ts dans app.component, je ne peux pas déclarer de directive dans @Component{}

directives:[CoursesComponent] me donnant une erreur

S'il vous plaît conseiller la solution sur elle.

angularangular2-directives
50
Vishu

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 ]
})
62
micronyks

Pour Angular RC5 et RC6, vous devez déclarer le composant dans la clé declarations du décorateur de métadonnées du module. Ajoutez donc CoursesComponent dans votre module principal declarations sous la forme ci-dessous et retirez 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 { }
37
ranakrunal9

RC5 & RC6 angulaires

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

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

Si vous ne déclarez pas le composant avant l'exécution de vos tests unitaires, Angular ne saura pas ce que <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();
  });
});
13
Emil Pedersen

les réponses ci-dessus En termes simples, vous devez vous enregistrer sous @NgModule

declarations: [
    AppComponent, YourNewComponentHere
  ]

de app.module.ts

n'oubliez pas de import ce composant.

7
Extreme