2

angular2 を使い始めたばかりで、ヒーロー チュートリアルのツアーを行いました: https://angular.io/docs/ts/latest/tutorial/

さらに進んで、いくつかのカスタムコードを実行しましたが、すべて問題ありません。

ただし、ng2-chart モジュールを使用しようとすると、動作しませんでした: http://valor-software.com/ng2-charts/

これは私がしました

npm install ng2-charts --save

この

npm install chart.js --save

しかし、js をインデックス ファイルにインポートするとき、これは機能しませんでした。

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

だから私はこれを使ってそれを修正しなければなりませんでした:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

次に、頭を悩ませている部分は次のとおりです。

//app.module.ts    
import {ChartsModule} from 'ng2-charts/ng2-charts'; 
...

imports: [ 
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    ChartsModule,
  ],
....

私はいつも得ています

GET localhost:3000/ng2-charts/ng2-charts 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading localhost:3000/ng2-charts/ng2-charts
    Error: XHR error (404 Not Found) loading localhost:3000/ng2-charts/ng2-charts
        at XMLHttpRequest.wrapFn [as _onreadystatecha

インポートする場合、それを知っておくとよいでしょう

import {ChartsModule} from 'node_modules/ng2-charts/ng2-charts'

私のサーバーの叫び

app/app.module.ts(17,31): error TS2307: Cannot find module 'node_modules/ng2-charts/ng2-charts'.

心に留めておくべきこと：私はjsとangular2の世界に本当に慣れていないので、ここでどのように機能するのかまだよくわかっていません。私と同じ問題を抱えている人を見たことがありますが、私は答えを理解していませんでした/私のアプリアーキテクチャはヒーローのツアーのものであり、それを変更するのに十分なangular2に慣れていないため、それらを使用できません今のところ。

「ng2-charts」を「node_modules/ng2-charts」にバインドする必要があります/パス自体が間違っています/ng2-chartsを「コンパイル」して.jsファイルを生成する必要がありますが、そうではありません。

役立つ情報:

  $ npm -v
    3.10.9
    $ tsc -v
    message TS6029: Version 1.5.3
    $ ng -v
    angular-cli: 1.0.0-beta.24
    node: 6.9.2
    os: win32 x64
    @angular/common: 2.4.2
    @angular/compiler: 2.4.2
    @angular/core: 2.4.2
    @angular/forms: 2.4.2
    @angular/http: 2.4.2
    @angular/platform-browser: 2.4.2
    @angular/platform-browser-dynamic: 2.4.2
    @angular/router: 3.4.2

(そして、誰かがヒーロー アーキテクチャのツアーをプロダクションにパッケージ化する方法を理解するためのリンクを教えてくれたら、とてもうれしいです) ありがとうございました

EDIT

これを私のsystemjs.config.jsファイルに追加することで解決した問題：

map: {
      'ng2-charts': 'node_modules/ng2-charts',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      "node_modules/ng2-charts": {
        defaultExtension: 'js' 
      }
    }

それがいつか誰かを助けることを願っています

4

4 に答える 4

3

以下のように、chart.js インポートを index.html ファイルの cdn リンクに変更し、他のすべてをドキュメントに従って保持します。 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

わたしにはできる。これが役立つことを願っています:)

于 2017-01-08T16:12:08.600 に答える
2

angular cli を使用している場合は、angular-cli.json のスクリプト セクションにこれを追加します。

  "../node_modules/chart.js/dist/Chart.bundle.min.js"
于 2017-07-01T17:44:52.083 に答える
0

system.config.js では、charts.js をマップに追加し、パッケージを実行して実行する必要がありました。

map: {
  'ng2-charts': 'npm:ng2-charts',
  'chart.js': 'npm:chart.js/dist/Chart.min.js',
},
packages: {
  'ng2-charts': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'chart.js': {
    defaultExtension: 'js',
  }

}
于 2017-10-07T16:44:18.213 に答える