2016-10-03 16 views
1

最新の/最終的なAngular 2 Versionを使ってプロジェクトをセットアップした後、チュートリアルに応じて簡単なハイチャートコンポーネントを実装することはできません。私は自分のチャートをセットアップしてから、htmlの<line-chart></line-chart>タグを使ってプロジェクトサイトに追加したいと思っています。angle 2 highchart final setup

linechart.component.ts

import {Component} from "@angular/core"; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 

@Component({ 
    selector:"app-linechart", 
    templateUrl:"./linechart.component.html", 
    directives: [CHART_DIRECTIVES], 
    styles: [` 
     chart { 
     display: block; 
     } 
    `] 

}) 
export class LinechartComponent{ 
    constructor() { 
    this.options = { 
     title : { text : 'example chart' }, 
     series: [{ 
     type: 'column', 
     data: [29.9, 71.5, 106.4, 129.2], 
     }] 
    }; 
    } 
    options: Object; 
} 

app.component.html

... 
    <div class="row"> 
     <div class="col-xs-6"> 
     <app-linechart></app-linechart> 
     </div> 
    </div> 
... 

コンソールのエラー:(パスが短縮)

Uncaught Error: Cannot find module "rxjs/observable/of" main.bundle.js:22045

./~/@angular/router/src/router.js 
Module not found: Error: Can't resolve 'rxjs/observable/of' in '/node_modules/@angular/router/src' 
resolve 'rxjs/observable/of' in 'node_modules/@angular/router/src' 
    Parsed request is a module 
    using description file: /node_modules/@angular/router/package.json (relative path: ./src) 
    Field 'browser' doesn't contain a valid alias configuration 
    after using description file: //node_modules/@angular/router/package.json (relative path: ./src) 
    resolve as module 
      .../node_modules/node_modules doesn't exist or is not a directory doesn't exist or is not a directory 
      .../node_modules/node_modules doesn't exist or is not a directory/node_modules/@angular/router/node_modules doesn't exist or is not a directory 
      .../node_modules/node_modules doesn't exist or is not a directory/node_modules/@angular/node_modules doesn't exist or is not a directory 
     .../node_modules/node_modules doesn't exist or is not a directory 
     looking for modules in ... 

app.module.ts

... 
import { OverviewComponent } from './sites/overview/overview.component'; 
import {ChartModule}   from 'angular2-highcharts'; 
import { Ng2Highcharts } from 'ng2-highcharts'; 

... imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    ChartModule, 
    Ng2Highcharts 
    ], 

私はhttps://www.npmjs.com/package/ng2-highcharts上のすべての手順に従い、https://www.npmjs.com/package/angular2-highchartsしようとした(非推奨された1かなり確実ではありませんか?)。誰でもそれを経験した?私はアイデアが不足しています。イオン2

については

+0

@edamerau

<script src="node_modules/chart.js/src/chart.js"></script> 

感謝のSRC /アプリ/ app.module.tsファイルに

import 'chart.js/src/chart.js'; 

を追加しますng2-代わりにチャート。このエラーについて:「キャッチされていないエラー:モジュールを見つけることができません」rxjs/observable/of「main.bundle.js:22045」あなたは 'rxjs'をインポートしましたか? – ulou

+0

rxjsがインポートされ、app.module.tsの一部が – edamerau

+0

のようにインポートされます。 import 'rxjs/Rx';あなたは正しくそれをインポートする場合は、このエラーを参照してはいけません – ulou

答えて

1

ではなく、あなたが試すことができ