Angular-cli RC5複数のコンポーネントをapp.module.tsに追加する

Question

私のAngular-cli RC5プロジェクトでは、チャートを作成しようとしています。 "ラインgraph.directive.ts" として指令

フォルダ構造を作成した "チャート"

として新しいコンポーネントを作成

1. 。

   

   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> 
   

   、Iは以下のようにapp.component.html内部以下加えました。

   <app-chart></app-chart> 
   

   "chart works！"アプリケーションを実行すると、行が表示されるはずです。

   しかし、そうではありません。

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

   ライン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!'; 
   } 
   

   私のコードに間違って何が起こったのかの提案。あなたがブラウザのネットワーク要求を見ると

   はあなた

Answer 1

をありがとう、私はAngularは、チャートコンポーネントをロードしようとしたときに、いくつかの404 not foundエラーを見つけるでしょう賭けます。

インポートパスが正しくありません。変更

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

正しいパスを使用してください。あなたの画像（小さな字下げ）からフォルダ構造を作るのは難しいですが、ディレクトリが同じフォルダにある場合は現在のインポートが機能しますAppModule

Answer 2

また、チャートコンポーネントをアプリケーションにインポートする必要があります.component.ts。 はちょうどそれが間違いなくあなたはまた、app.module.tsでのブートストラップのメタデータであなたのコンポーネントを宣言する必要が

Answer 3

に動作します

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

を追加します。 これがなければ、コンポーネントのコンテンツは表示されません。 私はわずか数時間前にこの問題に遭遇しました。

だからあなた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,ChartComponent], 
}) 
export class AppModule { 
}