Unexpected value

[bevrard]

Hi,

I'm trying to use your directive, but I've the following error in chrome dev tools:

Unexpected value 'Ng2Scrollster' declared by the module 'AppModule'

Do you have an idea?

[baktash93]

Are you using the latest version of Angular 2, i.e. the final release?

[bevrard]

Yes, I'm using Angular 2.0.1.

[baktash93]

Can you also show me the code as to where and how you're making Ng2Scrollster available to your view, i.e. your module.

[bevrard]

I'm using webpack 1.13.1 and typescript 2.0.2. Here is my configuration:

@NgModule({
    imports: [
        BrowserModule,
        // Router
        ROUTING,
        // Forms
        FormsModule,
        ReactiveFormsModule,
        Ng2BootstrapModule,
        ListboxModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, ResourceService.RESOURCE_URL, '.jsonProperties'),
            deps: [Http]
        }),
        StoreModule.provideStore({client,user, menu, applicationProperty, qualificationProperty, appointment, form, event})
    ],       // module dependencies
    declarations: [
        AppComponent,
        APPLICATION_DIRECTIVES,
        APPLICATION_PIPES
    ],   // components and directives
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    bootstrap: [ AppComponent ],     // root component
    providers: [APPLICATION_PROVIDERS]     // services,

})
export class AppModule { }

I've added Ng2Scrollster in the constant Application_directives:

import {Ng2Scrollster} from "ng2-scrollster";

export const APPLICATION_DIRECTIVES = [
... ,
Ng2Scrollster,
...
];

In vendor.ts, I've included ng2scrollster:

import 'ng2-scrollster';

And then, I'm using it in one template:

 <div ng-scrollster class="panel-scrollable-table size-page">

Should I place Ng2scrollster in the import modules in the NgModule definition?

[baktash93]

You are exporting the APPLICATION_DIRECTIVES which is an array from the file into your app module. Then, it is used as

...
declarations: [
    AppComponent,
    APPLICATION_DIRECTIVES, // <==
    APPLICATION_PIPES
], ...

which after evaluation turns into

declarations: [
    AppComponent,
    [ 
         ... ,
         Ng2Scrollster,
         ...
    ],
    APPLICATION_PIPES
],

instead of the following:

declarations: [
    AppComponent,
    ... ,
    Ng2Scrollster,
    ...
    APPLICATION_PIPES
],

And I think that's the problem.

[bevrard]

I've imported it like this:

declarations: [
    AppComponent,
    ... ,
    Ng2Scrollster,
    ...
    APPLICATION_PIPES
],

But it doesn't change anything. I'm trying to copy it as a local directive to check if it's working.

Benjamin

[baktash93]

It might be a problem with Webpack not being able to load it. Check your console's net panel to see if the request for the index.js of the Ng2Scrollster are resolved properly.

[bevrard]

If I make a local copy of these files in my project:

ng2Scrollster.d.ts
ng2Scrollster.js
ng2Scrollster.js.map

Then I declare the directive on the typings file, it's ok, the directive generates elements in dom. So I tried to import the directive on the src file in node_modules:

import {Ng2Scrollster} from "ng2-scrollster/src/ng2Scrollster";

But it doesn't work.
By the way, when I use the local copy, I can't see the custom scrollbar. Could you do a plunker to have an example?

[baktash93]

OK. I'll update the documentation to match Angular 2.0.0 and make a plunker that you can refer to as a demo.