How to add a NPM package correctly in the plunker?

Question

I got an error when using angular2-infinite-scroll. I want to reproduce it in a plunkr.

I tried to use npmcdn, so I add this line in the index.html file:

<script src="https://npmcdn.com/angular2-infinite-scroll@0.1.2"></script>

But I got the error:

Uncaught ReferenceError: require is not defined

This is my plunker.

How can I add a NPM package correctly in the plunker?

Add it to the `map` object in your `config.js` file and possibly also in the `packages` object, if the package doesn't have a `index.js`. — Maximilian Riegler, Jun 16 '16 at 13:18

Maximilian Riegler · Accepted Answer · 2016-06-16T13:55:50.053

9

Add it to the map object in your config.js file and possibly also in the packages object, if the package doesn't have a index.js.

map: {
    [...],
    'angular2-infinite-scroll': 'https://npmcdn.com/angular2-infinite-scroll@0.1.2'
},
packages: {
    [...],
    'angular2-infinite-scroll': {
        main: 'angular2-infinite-scroll.js',
        defaultExtension: 'js'
    }
},

working Plunker

edited Jun 16 '16 at 13:55

answered Jun 16 '16 at 13:23

Maximilian Riegler

22,720
4
62
71

thanks! but I think the Plunker link u gave to me is wrong.. Or maybe u didn't save – Hongbo Miao Jun 16 '16 at 13:27
Uh, forgot to save :) – Maximilian Riegler Jun 16 '16 at 13:28
Hmm, angular2-infinite-scroll 0.1.2 should work properly.. Because the error I met is only in 0.1.3. Maybe still something wrong in the plunker? – Hongbo Miao Jun 16 '16 at 13:34
Oh, I found the error in your plunker. After removing duplicated `directives: []` in the **app.ts**, the error is gone! – Hongbo Miao Jun 16 '16 at 13:35
I leave the working version with `onScroll` function here: https://plnkr.co/edit/uof65imnVnMooMlBksoe?p=preview – Hongbo Miao Jun 16 '16 at 13:39
`the error in your plunker` - I just fixed your imports, not your actual code - haha – Maximilian Riegler Jun 16 '16 at 13:55

How to add a NPM package correctly in the plunker?

1 Answers1