Angular2 и NG2-карта модуль:

Question

Я только начал использовать angular2 и я сделал тур героев учебника: https://angular.io/docs/ts/latest/tutorial/

я пошел дальше и сделал пользовательский код и все в порядке.

Однако, когда я попытался с помощью модуля NG2-диаграммы, я не мог сделать его работу: 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 мир, я вещь, которую я до сих пор не очень хорошо понимаю, как все работает здесь. Я видел некоторых людей, имеющих ту же проблему, что и у меня, но я не понимал ответы/я не могу их использовать, так как моя архитектура приложения - это одна из экскурсий героев, и я не знаком с enoungh с угловым2, чтобы изменить это на данный момент.

я подозреваю 3 проблемы: я должен связать «NG2-карт» в «node_modules/NG2-карта» /сам путь является неправильным/в NG2-графики должны быть «составлена», чтобы произвести какой-то файл .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' 
     } 
    } 

надеюсь, что это поможет кому-нибудь когда-нибудь

Answer 1

просто измените свой файл chart.js на ссылку cdn в файле index.html, как показано ниже, и сохраните все остальное в соответствии с документом.

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

это работает для меня. надеюсь, что это поможет :)

Answer 2

добавить это ваши разделы скриптов в угловом-cli.json, если вы используете угловые консоли

"../node_modules/chart.js/dist/Chart.bundle.min.js" 

Answer 3

В 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', 
    } 

}