No work

[Rudimo]

[rd-dev-ukraine]

Could you please show your tsconfig.json file?

[Rudimo]

I compile using WebPack

[danielordonez]

SlimScroll directive should be added under declarations, not imports.

[artem-konovalov-personal]

I got the following error:

Error: Can't resolve all parameters for SlimScroll: (?, ?).

What's wrong? I've been added SlimScroll to the declarations:[] in the NgModule. Tell me please which import {} do I need to use SlimScroll? 'cause I'm using import { SlimScroll } from 'angular-io-slimscroll' and it produces an error which tells me

"Cannot find module...". But I have angular-io-slimscroll in my node_modules.

My angular-io-slimscroll directive has the following tree after installation:

• node_modules;
• src (with slimscroll.directive.ts);
• package.json;
• Licence;
• Readme

My systemjs looks like:

var map = {
    'angular-io-slimscroll': 'node_modules/angular-io-slimscroll/src',
};

var packages = {
    'angular-io-slimscroll': { defaultExtension: 'js', main: "slimscroll.directive.js" },
};

Thanx a lot

[Omikhleia]

You probably do not have the slimscroll.directive.js file you mentioned in your systemJS configuration, as angular-io-slimscroll only comes with the .ts file in its delivery...

If that is indeed the case, you'll pobably need either to instruct systemJS to transpile it, or to ensure it is done earlier (e.g. invoking tsc on it from your package.json). That would be my best guess, as I no longer use systemJS, having switched my projects to Angular-CLI (webpack)... IMHO, systemJS is a bit too complex (with all those paths and ad hoc main files to declare) on the long run...

Alternately, as a workaround, since it's juste one directive (slimscroll.directive.ts), you may copy it from the node modules into your app, and import it from there - The transpiling is already done on all file there.

[artem-konovalov-personal]

I have .js and .map files in the src directory

[Omikhleia]

Just reproduced your issue with the basic angular 'quickstart', with its app.module.ts just modified to add: import { SlimScroll } from 'angular-io-slimscroll' I got the "Cannot find module" occurring at the transpiling level (tsc), so it's not even systemJS-related.

Seems to be a bug, indeed. The following solutions fixed it for me:

Either add in nodes_modules/angular-io-slimscroll/package.json (ideally just below the "main" entry): "typings": "./src/slimscroll.directive.ts", Cf. Typescript's module resolution.

Or add a nodes_modules/angular-io-slimscroll/index.ts containing: export { SlimScroll } from './src/slimscroll.directive';

Hope this helps... Can you check one or another of these changes works for you too?

[artem-konovalov-personal]

Great! Both of your solutions work as well.

import { SlimScroll } from 'angular-io-slimscroll';

Now this one doesn't produces an "404" error.

But now I have following errors in my DevTools console:

I've been tried to put SlimScroll into the imports and I had this one in my console:

Error: Unexpected directive 'SlimScroll' imported by the module 'AppModule'

Then I tried to put it into the declarations (as danielordonez mentioned before). And I have

Error: Can't resolve all parameters for SlimScroll: (?, ?).

I have imported SlimScroll to the component that uses it. And added to the view a piece of code from an example

    <div slimScroll
         width="auto"
         height="250px"
         size="7px"...

[artem-konovalov-personal]

Will you send a pull request to fix this issue with import { SlimScroll }? I can do this if you'd rather. It should be fixed 'cause I don't want to put that string into the package.json every time I'll use npm install and I suppose nobody wants

[artem-konovalov-personal]

Do you have any thoughts about my previous post? Alas I can't start this package due to this error.

I have following errors in my DevTools console:

I've been tried to put SlimScroll into the imports and I had this one in my console:

Error: Unexpected directive 'SlimScroll' imported by the module 'AppModule'

Then I tried to put it into the declarations (as danielordonez mentioned before). And I have

Error: Can't resolve all parameters for SlimScroll: (?, ?).

I have imported SlimScroll to the component that uses it. And added to the view a piece of code from an example

<div slimScroll
     width="auto"
     height="250px"
     size="7px"...

[Omikhleia]

The appropriate place for directives is indeed in the declarations in NgModule.

I did a complete test including a slim scrollbar in the basic angular 'quickstart' application, out-of-the-box, with just the following changes:

• Import SlimScroll and declaration in app.module
• Import SlimScroll and use in app.component's template.

I did not get any "Can't resolve all parameters for SlimScroll" error - I.e. it worked fine (once the above module resolution issue is fixed)

So I'm afraid I have no clue on that other problem you are observing. (Googling for "Can't resolve all parameters", it pops here and there on many different situations, and it's not very clear what might cause it. It might not even be related to that module, but to Angular or Typescript versions, or configuration ? Erm...).

[artem-konovalov-personal]

Very strange behavior...

I've been installed Angular quickstart as you mentioned and added imports and declarations you mentioned above.

The same error occurs in Chrome DevTools. I did any additional steps, just imported into the app.module from quickstart, added to the declarations:[], imported into the app.component and used it in an existing template. That's it.

I've added your solution for tsc compiler of course. Nothing more. I see any mistake I've done, but it still doesn't work. Another machine, another OS (Win in my office but Linux at home).

my app.module

my app.component

my systemjs

my tsconfig

my package.json

All is installed just from angular quickstart repo

[artem-konovalov-personal]

It turns out I get an error when I put SlimScroll into the declarations:[]. When I remove it from declarations error disappears. But I don't have custom scroll of course

[artem-konovalov-personal]

No ideas? It seems this repo isn't supported absolutely

[Omikhleia]

Just for the sake of trying to help @nervebassmaster (i am not in charge of this repo, after all -- just a user too)...

I strongly suspect the issue is how you got your src/slimscroll.directive.js generated, in the first place. That was my first question above: It's not provided with the raw "npm install", so you had to obtain it from elsewhere, or generate it by yourself, depending on your tool chain. But if it's not generated with the appropriate rules, it might lack things (metadata, etc.) and fail.

Lemme explain my findings: Out-of-the box, this code comes up with the standalone .ts only, without any precompiled .js bundle, neither does it have a src/tsconfig.json nor a "prepublish" section in its package.json to generate it automatically.

In other terms, it does not seem to provide the .js bundled with it: As I earlier wrote above, it likely needs to be transpiled to JS at some level in the build chain (and that may actually depend on the tool chain, i.e. systemJS vs. webpack - I am not sure they all behave the same way). Anyhow, said otherwise, it does not seem to be usable directly "out-of-the-box".

I realize I forgot a step above, when attempting it to get it work with the basic angular quickstart, I had to add a quick'n'dirty prebuild step for that module in my package.json, invoking tsc on it with appropriate settings (i.e. with the usual tsconfig.json from my project, which has the same settings as the one you posted above).

A possibly better solution for the package developer of that repo would be to add a tsconfig.json and a "prepublish" section invoking tsc, so that when publishing to npm, the bundle (if I understand it correctly) would be automatically generated (.js, .js.map, etc.). I have therefore added that stuff to my previous PR, for the record.

Until the PR is accepted and the package republished to NPM, it won't work, of course - But at least, if you take my changes, then you can just go into the node_modules/angular-io-slimscroll folder and run "npm link" manually for the prepublish step to be invoked locally.

Doing this, I end up with a brand new .js, and it does work with the exact same changes as yours to the angular quickstart.

Anyhow, if this not convenient enough, an alternate workaround is to copy the directive into your own app folder and import it from here, so you don't have to bother with transpiling and referencing in systemJS. It's not as if that repo contained hundred of files, it's just one single directive with no fancy dependencies. Understandably, it's not ideal (you copy third-party external code into your app), but being MIT-licensed, it's not strictly forbidden (well, you might want to add an appropriate comment to the copied file, of course, to keep track of the license and original author) -- and at least it's still a decent workaround so that you can use the slimscroll bar without waiting or being stuck.

Hope it helps.

[artem-konovalov-personal]

Awesome! I've sent an email to the author of the package to ask him to merge your changes. Thanx a lot, man!

[rd-dev-ukraine]

@nervebassmaster we fix it. Thanx to @Omikhleia

[nisarahmedah]

I get the exact same error. Do we have a fix for this?

[gauravbora2008]

Facing same issue... followed above steps but still showing error... what to do?

[rd-dev-ukraine]

@gauravbora2008 are you using system.js?

[gauravbora2008]

@rd-dev-ukraine No I am using webpack.

[shijithkm]

I am also getting the same issue , I am using angular cli

[MorlaRamakrishna]

I am also getting same error

[rd-dev-ukraine]

Package was updated.