导入库Angular 2

Question

我正在构建一个Angular 2应用程序 - 我正在使用Angular quickstart作为基础。 我试图导入一个名为Flickity的库，但我没有成功。

到目前为止： - 我安装使用npm install flickity 库 - 然后，我把我的systemjs.config.js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '...' 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'flickity':     'npm:flickity', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

但是，当我试图进口和使用的Flickity我的组件上，不工作：

import { Component, OnInit } from '@angular/core'; 
declare var Flickity; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-app', 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent implements OnInit { 
    ngOnInit() { 
    console.log(Flickity); 
    } 
} 

我该怎么做？

Answer 1

declare var Flickity;不会将库添加到您的项目中。你必须将其导入：

import Flickity from 'flickity'

此外，它添加到您的System.config.js，这样很明显在库主JS文件是：

flickity: { 
    defaultExtension: 'js', 
    main: './dist/flickity.pkgd.js' 
}