Angular 2 highcharts 最终设置答案

【问题标题】：Angular 2 highcharts final setupAngular 2 highcharts 最终设置
【发布时间】：2016-10-03 10:13:48
【问题描述】：

在使用最新/最终 Angular 2 版本设置项目后，我无法根据其中的教程实现简单的 highchart 组件 - 我已经创建了一个 linechart 组件目录，我想在其中设置向上我的图表，然后使用 html 中的 <line-chart></line-chart> 标记将其添加到项目站点中。

我的 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>
...

控制台错误：（路径缩短）

未捕获的错误：找不到模块“rxjs/observable/of”main.bundle.js:22045

./~/@angular/router/src/router.js 找不到模块：错误：无法解析“/node_modules/@angular/router/src”中的“rxjs/observable/of” 解决 'node_modules/@angular/router/src' 中的 'rxjs/observable/of' 解析的请求是一个模块使用描述文件：/node_modules/@angular/router/package.json（相对路径：./src）字段“浏览器”不包含有效的别名配置使用描述文件后：//node_modules/@angular/router/package.json（相对路径：./src）解析为模块 .../node_modules/node_modules 不存在或不是目录不存在或不是目录 .../node_modules/node_modules 不存在或不是目录/node_modules/@angular/router/node_modules 不存在或不是目录 .../node_modules/node_modules 不存在或不是目录/node_modules/@angular/node_modules 不存在或不是目录 .../node_modules/node_modules 不存在或不是目录在...中寻找模块

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
  ],

我按照ng2-highcharts` 上的所有步骤操作并尝试了angular2-highcharts（不太确定哪个已弃用？）。有没有人有这方面的经验？我的想法不多了。

【问题讨论】：

你可以试试 ng2-charts。关于此错误：“未捕获的错误：找不到模块“rxjs/observable/of”main.bundle.js:22045”。你导入了 'rxjs' 吗？
rxjs 被导入，app.module.ts 的一部分被导入
尝试像这样导入它： import 'rxjs/Rx';如果您正确导入，您应该不会看到此错误
谢谢！您是否有将charts.js 设置为angular2 的经验？我收到以下错误：..caused by: ng2-charts configuration issue: Embedding Chart.js lib is mandatory - 我知道我必须将以下行添加到我的项目中 <script src="node_modules/chart.js/src/chart.js"></script> 但哪个文件？ index.html、component.template.html 还是 app.component.html？
没关系。通过在我的 modules.ts 中添加 import 'chart.js/src/chart.js'; 来解决它

标签： angular npm highcharts rxjs

【解决方案1】：

对于离子 2

添加

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

到 src/app/app.module.ts 文件而不是

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

感谢@edamerau

【讨论】：