Error loading Perfect Scrollbar on Angular 4

[alienriquebm]

Hi my friend thanks for your hard work.

I try to install this on my project but i have an error:

GET http://localhost:8000/ngx-perfect-scrollbar 404 (Not Found) zone.js:1561

So i add this to my systemjs.config.js file:

'ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar/bundles/ngx-perfect-scrollbar.umd.min.js'

I put on my component this:

<div class="sidebar-wrapper" [perfect-scrollbar]>
    <div class="logo logo-dashboard-normal">
        <div class="logo-img">
...

And now i have this error:

Here is my config on app.module.ts file:

... [SOME OTHER LIBS]
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

export const routes: Route[] =[
    { path: 'unauthorized', children: [{ path: 'unauthorized', component: UnauthorizedComponent }] }
]

@NgModule({
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        DashboardModule,
        SidebarModule,
        NavbarModule,
        FooterModule,
        HttpModule,
        AuthModule,
        RouterModule.forRoot(routes),
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ],
[SOME OTHER STATEMENTS ...]

What i'm doing wrong? The config on my systemjs.config.js are ok? Thanks.

[sconix]

Example app has a systemjs example so maybe have a look from there to check if you missed something from the config file.

[alienriquebm]

Hi my friend, thanks for the answer, but on your sample the config is with 'angular2-perfect-scrollbar': 'node_modules/angular2-perfect-scrollbar'

And i installed the version ngx-perfect-scrollbar.

I put this and the error persist:

'ngx-perfect-scrollbar': 'node_modules/ngx-perfect-scrollbar'

[sconix]

Ok I have forgotten to update the example, let me do it now.

[sconix]

Ok fixed now, but the config file was still valid and working it only had old name in it.

[alienriquebm]

Thanks my friend i already do it but the component template still with this error:

[sconix]

Then your apps module configuration is not correct.

[sconix]

Actually why do you have [perfect-scrollbar] and not just perfect-scrollbar in your div? I think thats the problem.

[alienriquebm]

Ok i change it and put this code exaclty:

     <perfect-scrollbar fxFlex>
          Scroll<br>
          me!<br>
          <br>
          I<br>
          am<br>
          an<br>
          example<br>
          content<br>
          text<br>
          for<br>
          this<br>
          really<br>
          cooooooooooooooooooooooooooooooooooooooooooooooooool<br>
          scrollable<br>
          area<br>
          in<br>
          this<br>
          example<br>
          app<br>
          which<br>
          is<br>
          using<br>
          the<br>
          angular2<br>
          perfect<br>
          scrollbar<br>
          library<br>
        </perfect-scrollbar>

And the error persist:

Here is my component.ts file:

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { ROUTES } from './sidebar-routes.config';
import { MenuType } from './sidebar.metadata';
import { Auth } from './../authentication/auth.service';

import { User } from './../authentication/user-model';

import { PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';

declare var $:any;

@Component({
    moduleId: module.id,
    selector: 'sidebar-cmp',
    templateUrl: 'sidebar.component.html',
})

export class SidebarComponent implements OnInit {
    public menuItems: any[];
    isCollapsed = true;
    user:User = null;

@ViewChild(PerfectScrollbarComponent) componentScroll;
@ViewChild(PerfectScrollbarDirective) directiveScroll;
...

My app.module.ts:

import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

export const routes: Route[] =[
    { path: 'unauthorized', children: [{ path: 'unauthorized', component: UnauthorizedComponent }] }
]

@NgModule({
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        DashboardModule,
        SidebarModule,
        NavbarModule,
        FooterModule,
        HttpModule,
        AuthModule,
        RouterModule.forRoot(routes),
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ],
    declarations: [ AppComponent, DashboardComponent ],
    bootstrap:    [ AppComponent ],
    providers: [
            Auth,
            AuthGuard,
            AppConfig,
            pageInfoService,
            { provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true }
        ]
})
export class AppModule { }

[sconix]

Sorry then I have no idea where the problem is. At least the code snipplets look ok to me, but I am not too familiar with SystemJS so that I could know if that problem comes from there or from the code.

[RichieRock]

One thing comes to my mind that have you told your systemjs where to find ngx-perfect-scrollbar? For example, do you have in your systemjs config the following lines defined in packages?

  packages: {
    'ngx-perfect-scrollbar': {
      main: 'bundles/ngx-perfect-scrollbar.umd.js',
      defaultExtension: 'js'
    },
  ...
  }

[alienriquebm]

Thanks @RichieRock i think that already do this:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', 

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js',
      'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js',
      'angular-calendar': 'node_modules/angular-calendar/dist/umd/angular-calendar.js',
      'calendar-utils': 'npm:calendar-utils/dist/umd/calendarUtils.js',
      'angular-resizable-element': 'npm:angular-resizable-element/dist/umd/angular-resizable-element.js',
      'angular-draggable-droppable': 'npm:angular-draggable-droppable/dist/umd/angular-draggable-droppable.js',
      'date-fns': 'npm:date-fns',
      'ngx-perfect-scrollbar': 'node_modules/ngx-perfect-scrollbar'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      "angular2-jwt": {
                "defaultExtension": "js"
            },
      "date-fns": {
        main: './index.js',
        defaultExtension: 'js'
      },
      'ngx-perfect-scrollbar': {
        main: 'bundles/ngx-perfect-scrollbar.umd.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

[RichieRock]

Sorry but I'm gonna ask the obvious: have you installed the latest ngx-perfect-scrollbar via npm? If that's not the cause of the problem, then I don't know where the issue is.

Also, I see that your other libraries in your systemjs.config are loaded directly from npm, but you're loading ngx-perfect-scrollbar from node_modules. You might wanna stick with the same method (either install them using npm install and a package.json file or let systemjs do it for you) for all your libraries.

[alienriquebm]

Well.. yes, i do npm install ngx-perfect-scrollbar --save

[alienriquebm]

So.. i see where is the problem. The problem is on nested modules. I have his folder structure:

App
|   app.component.html
|   app.component.js
|   app.component.js.map
|   app.component.ts
|   app.config.js
|   app.config.js.map
|   app.config.ts
|   app.module.js
|   app.module.js.map
|   app.module.ts
|   config.development.json
|   config.production.json
|   env.json
|   main.js
|   main.js.map
|   main.ts
|   
+---authentication
+---dashboard
\---sidebar
        sidebar-routes.config.js
        sidebar-routes.config.js.map
        sidebar-routes.config.ts
        sidebar.component.html
        sidebar.component.js
        sidebar.component.js.map
        sidebar.component.ts
        sidebar.metadata.js
        sidebar.metadata.js.map
        sidebar.metadata.ts
        sidebar.module.js
        sidebar.module.js.map
        sidebar.module.ts

I have my directive on "sidebar.component.html", but i declare the dep. on "main.module.ts". If i remove this imports on main.module.ts and put it on "sidebar.module.ts" it works.

So i'm a little confused... if i declare a import of a another module on "main.module.ts" is not available for all children sub modules? On my main.module.ts have the import of sidebar.module.ts. I don't understand.

[sconix]

Yes that's how Angular module system works. Did not realize that you have multiple modules. You should be able to import it in the main module, but then you need to export it as well. Anyway for the Angular module system you should refer to Angular documentation.