Add 3rd party library to angular2 cli

Question

I'm trying to add a third party library to angular2, namely the Flickity slider.

Tried to install typings. When importing them I get en error that @typings/flickity is not a module.

Second attempt to add it in angular-cli.json. Added in apps[0].scripts as described in the docs. In the component i've used it like this:

this.slider = new Flickity('.news-wrapper', { cellAlign: 'left', contain: true, prevNextButtons: false, pageDots: true });

When compiling I get an error Cannot find name 'Flickity'., but when running the site it works like a charm.

The problem is I can't build the app because of that error.

How should it be added then?

HI, I am also trying to use flickity with angular2. can you please share your success story and how u did? i am using angular cli — shajeeck
– shajeeck, Commented Dec 13, 2016 at 6:41

Eswar · Accepted Answer · 2016-11-01 07:04:22Z

3

follow below steps to use flickity in angular-cli based project

npm install flickity --save
declare module 'flickity'; in typings.d.ts
import * as Flickity from "flickity"; in app.component.ts (needs to import wherever required)

use it like as you mentioned

this.slider = new Flickity('.news-wrapper', { cellAlign: 'left', contain: true, prevNextButtons: false, pageDots: true });

answered Nov 1, 2016 at 7:04

Eswar

4,9931 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hi, i am new to angular 2, how can we declare module 'flickity'; in typings.d.ts??

@shajeeck add this line to typings.d.ts declare module 'flickity';

This solved my issue. @types/flickity was not working

Mostafa Abdelraouf · Accepted Answer · 2016-11-01 00:21:58Z

0

I am not sure if this will work but you can try this in the file that needs flickity.

let Flickity = require('flickity');

Just make sure you installed let Flickity using NPM

answered Nov 1, 2016 at 0:21

6281 gold badge6 silver badges14 bronze badges