javascript - Difficulties loading angular2-infinite-scroll

Question

I am getting 2 errors on my app:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3002/angular2-infinite-scroll

angular2-polyfills.js:1243 Error: XHR error (404 Not Found) loading http://localhost:3002/angular2-infinite-scroll(…)

Here is the page in question:

import {Component} from 'angular2/core';
import {Router, CanDeactivate} from 'angular2/router';
import { InfiniteScroll } from 'angular2-infinite-scroll';

@Component({
selector: 'dapps',
directives: [ InfiniteScroll ],
templateUrl: '/app/dapps/templates/dapps.component.html',

Down further in the component I have:

onScroll () {
    console.log('scrolled!!')
}

I installed the Infinite scroll npm package using:

 npm install angular2-infinite-scroll --save

In the template file for the component I have:

<div class="row" infinite-scroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="500"
        (scrolled)="onScroll()">
</div>

edit tried:

config.js on root:

System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
'angular2-infinite-scroll': '~/angular2-infinite-scroll'
},
//packages defines our app package
packages: {
'angular2-infinite-scroll': {
main: 'angular2-infinite-scroll.js',
defaultExtension: 'js'
}
}

});

Answer 1

You have to configure the angular2-infinite-scroll in your systemjs config. See the config.js file in the example plunk:

https://plnkr.co/edit/DzKAiAxtAleIrT0tsqtj?p=preview

 map: {

   'angular2-infinite-scroll': 'node_modules/angular2-infinite-scroll'
}

and for the packages object add:

'angular2-infinite-scroll': {
  main: 'angular2-infinite-scroll.js',
  defaultExtension: 'js'
}