Angular-cli RC 5 Ajout de plusieurs composants à app.module.ts

Question

Dans mon projet RC5 Angular-cli, j'essaie de créer des graphiques.

1. créé un nouveau composant comme "graphique"
2. créé une directive comme "ligne-graph.directive.ts"

structure de dossier.

app.module.ts

import {NgModule, enableProdMode}  from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {AppComponent} from './app.component'; 
import {ChartComponent} from './chart/chart.component'; 
import {LineGraphDirective} from './chart/line-graph.directive'; 

@NgModule({ 
    declarations: [AppComponent, ChartComponent, LineGraphDirective], 
    providers: [], 
    imports: [], 
bootstrap: [AppComponent], 
}) 
export class AppModule { 
} 

chart.component.html

<p> 
chart works! 
</p> 

Ensuite, j'ai ajouté suivant à l'intérieur du app.component.html comme ci-dessous.

<app-chart></app-chart> 

Alors "le graphique fonctionne!" ligne devrait s'afficher lorsque j'exécute l'application.

Mais ce n'est pas le cas.

chart.component.ts

import {Component} from '@angular/core'; 

@Component({ 
moduleId: module.id, 
selector: 'app-chart', 
templateUrl: 'chart.component.html', 
styleUrls: ['chart.component.css'], 
directives: [] 
}) 
export class ChartComponent { 
    constructor() {} 
} 

line-graph.directive.ts

import {Directive, ElementRef} from '@angular/core'; 

@Directive({ 
    selector: 'line-graph' 
}) 

export class LineGraphDirective { 
    constructor() {} 
} 

app.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

Toutes les suggestions de ce que j'ai mal fait avec mon code.

Merci Vous

Answer 1

Si vous regardez dans les requêtes réseau de votre navigateur, je parie que vous trouverez quelques 404 not found erreurs lors Angular essaie de charger le composant graphique.

Vos chemins d'importation sont incorrects. Changer

import {ChartComponent} from './chart/chart.component'; 
import {LineGraphDirective} from './chart/line-graph.directive'; 

Avec les bons chemins. La structure des dossiers est difficile à distinguer de votre image (petite indentation) mais votre importation actuelle ne fonctionnerait que si le répertoire chart se trouvait dans le même dossier que AppModule

Answer 2

Vous devez également importer votre composant graphique dans l'application .component.ts. il suffit d'ajouter

import {ChartComponent} from './chart/chart.component'; 

Il va certainement travailler

Answer 3

Vous devez aussi déclarer votre composant les métadonnées d'amorçage dans le app.module.ts. Sans cela, il n'affichera pas le contenu de votre composant. J'ai aussi rencontré ce problème il y a quelques heures.

Ainsi, votre app.module.ts devrait ressembler à ceci:

import {NgModule, enableProdMode}  from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {AppComponent} from './app.component'; 
import {ChartComponent} from './chart/chart.component'; 
import {LineGraphDirective} from './chart/line-graph.directive'; 

@NgModule({ 
    declarations: [AppComponent, ChartComponent, LineGraphDirective], 
    providers: [], 
    imports: [], 
bootstrap: [AppComponent,ChartComponent], 
}) 
export class AppModule { 
}