Question

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

到目前为止： - 我使用subDir_2安装了库 - 然后我穿上了npm install flickity

systemjs.config.js

但是，当我尝试导入并在我的组件上使用Flickity时，不起作用：

(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);

我该怎么做？

Answer 1

declare var Flickity;是一种告诉TypeScript Flickity已经（某种程度上）已经加载的方法，它就在范围内。它不会将库添加到您的项目中。

你必须导入它：

import Flickity from 'flickity'

此外，将它添加到System.config.js，以便清楚库主JS文件的位置：

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

导入库Angular 2

1 个答案: