Include .ts files with npm package about ngx-infinite-scroll HOT 14 CLOSED

hi.
I'm also having this issue.
can you suggest a pull request or where the fix should be?
@ocombe can you assist?

from ngx-infinite-scroll.

You don't want to include the ts files, it will produce a lot of errors. If you two are using systemjs, then you need to define the default extension as ".js". Something like that:

System.config({
    packages: {
        "/angular2-infinite-scroll": {"defaultExtension": "js"}
    }
});

If you're not using system.js then I need to take a look at your setup to find out where the problem is.

from ngx-infinite-scroll.

hi @ocombe
I'm using angularClass's angular 2 webpack starter.

from ngx-infinite-scroll.

@ocombe did you figure out how to solve this for webpack?

from ngx-infinite-scroll.

What I eventually did was exclude this package from the source-map-loader.

   preLoaders: [
    ** snip **
    {
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: [
          // these packages have problems with their sourcemaps
          helpers.root('node_modules/rxjs'),
          helpers.root('node_modules/@ngrx/router'),
          helpers.root('node_modules/angular2-infinite-scroll')
        ]
      }
    ],

from ngx-infinite-scroll.

@nathasm good call. I didn't realize that source maps were causing the problem.

from ngx-infinite-scroll.

I want to use this package, and npm install npm-repo works. But that's not the latest version. when npm-installing from github, I've lost the .ts files (as mentioned above).
I can't get it to work. I'm using angular-cli with system.js. How can I import this directive in a component if there's no export in a .ts file?

from ngx-infinite-scroll.

hi @daco
you should import this module as:

import { InfiniteScroll } from 'angular2-infinite-scroll';

there's no need to import the ts file.
Also, the latest package includes inline sourcemap, so if you open this file in chrome devtool, you'll see the ts implementation.

from ngx-infinite-scroll.

Thanks! I get
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
event-list.component.ts (3, 32): Cannot find module 'angular2-infinite-scroll'

When trying to build this.

from ngx-infinite-scroll.

There's a solution for that (adopted from ng boostrap issue):
add angular2-infinite-scroll to system-config.ts:

const barrels: string[] = [
  // other Angular specific barrels...

  // other Thirdparty barrels.
  // add this one:
  'angular2-infinite-scroll',

  // other App specific barrels.
];

update system config as well in the system-config.js:

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'angular2-infinite-scroll': 'vendor/angular2-infinite-scroll'
  },
  packages: cliSystemConfigPackages
});

add this to vendorNpmFiles angular-cli-build.js:

'angular2-infinite-scroll/**/*.js'

from ngx-infinite-scroll.

Hi @orizens
Thanks for your reply. I've tried your suggestion, but still no luck. Both my IDE and Broccoli tell me they cannot find the module I'm trying to import.
Maybe I'm wrong, but my logic tells me that when I'm importing something with

import { InfiniteScroll } from 'angular2-infinite-scroll'

as per your suggestion, would only work if the targeted file actually exports 'InfiniteScroll'. Since we're now working with a .js file, there's no export. Or am I missing something?

Thanks in advance :)

from ngx-infinite-scroll.

hi @daco
you're right - i forgot to note that you should import the scroller like that:

import { InfiniteScroll } from 'angular2-infinite-scroll/angular2-infinite-scroll'; 

from ngx-infinite-scroll.

Hi @orizen,

I've got it working now, by including .ts files in the package. Reading angular2-infinite-scroll.js I see stuff like

System.registerDynamic("src/scroller"

but in the package there's no src directory because the .ts files belonging to that directory are ignored by .npmignore. I made a fork and deleted .npmignore and npm installed that fork.
Again, I'm fairly new at this, but I could not get it to work otherwise!

from ngx-infinite-scroll.

the "js" files are generated by tsc, so the "src/scroller" is actually an identifier.
I got it working using the settings I mentioned above.

from ngx-infinite-scroll.