導入庫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' 
}