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

Я подозреваю 3 проблемы: я должен связать "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' 
      }
    }

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

2
rhamdi 8 Янв 2017 в 05:25

3 ответа

Лучший ответ

Просто измените свой импорт 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>

Меня устраивает. надеюсь это поможет :)

2
Amit kumar 8 Янв 2017 в 16:12

Добавьте это в разделы скриптов в angular-cli.json, если вы используете angular cli

  "../node_modules/chart.js/dist/Chart.bundle.min.js"
2
Cengkuru Michael 1 Июл 2017 в 17:44

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

}
0
TheQuestioner 7 Окт 2017 в 16:44