ionic2 导入第三方js库文件

网上有很多歪果仁写的导入第三方js，但是都行不通。

还是要用官方推荐的typings。步骤如下：

1.全局安装Typings

npm install -g typings

2.搜索你想要的插件，如chartjs

typings search chart.js

搜索结果如下：

Viewing 1 of 1

NAME    SOURCE HOMEPAGE                           DESCRIPTION VERSIONS UPDATED
chartjs dt     https://github.com/nnnick/Chart.js             1        2016-07-11T09:45:30.000Z

3.安装js库

搜索到的名称，选择一个在项目根目录底下安装

npm install chart.js --save

typings install chart.js --save

4，使用js库

（1）在你需要使用的page包内，在***.html文件中使用标签

<ion-content padding class="about">  
    <canvas id="myChart" width="400" height="400"></canvas> 
</ion-content>

（2）在***.ts文件中导入，并创建数据

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import * as ChartJs from 'chart.js'; // 导入chart.js
@Component({
    templateUrl: 'build/pages/about/about.html'
})
export class DataChartPage{
    constructor(private navController:NavController) {

    }

    ionViewDidLoad() {
        var canvas = <HTMLCanvasElement> document.getElementById("myChart");
        var ctx = canvas.getContext("2d");  // 这里是关键, 不能写在constructor()中
        ChartJs.Line(ctx,{
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        })
    }
}

如果用第2步，typings search没有搜索到你要的库

但是，npm可以搜到相关ts文件， 一定要是ts文件（比如ng开头的，如ng-circle-progress），才会有*.d.ts声明文件，才可以直接引用

例如：circle-progress这个库在typings搜索没有，但是可以：

npm search circle-progress

npm install ng-circle-progress --save

然后第4步引用就一样了。