Comments (15)
Example app has a systemjs example so maybe have a look from there to check if you missed something from the config file.
from ngx-perfect-scrollbar.
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'
from ngx-perfect-scrollbar.
Ok I have forgotten to update the example, let me do it now.
from ngx-perfect-scrollbar.
Ok fixed now, but the config file was still valid and working it only had old name in it.
from ngx-perfect-scrollbar.
Thanks my friend i already do it but the component template still with this error:
from ngx-perfect-scrollbar.
Then your apps module configuration is not correct.
from ngx-perfect-scrollbar.
Actually why do you have [perfect-scrollbar] and not just perfect-scrollbar in your div? I think thats the problem.
from ngx-perfect-scrollbar.
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 { }
from ngx-perfect-scrollbar.
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.
from ngx-perfect-scrollbar.
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'
},
...
}
from ngx-perfect-scrollbar.
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);
from ngx-perfect-scrollbar.
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.
from ngx-perfect-scrollbar.
Well.. yes, i do npm install ngx-perfect-scrollbar --save
from ngx-perfect-scrollbar.
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.
from ngx-perfect-scrollbar.
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.
from ngx-perfect-scrollbar.
Related Issues (20)
- Native Scrollbars Support in ngx-prerfect-scrollbar HOT 1
- help/question x scrollbar position top
- Scroll to buttom and reduce the contents of the container, the scroll bar will not adapt to changes automatically HOT 1
- scrollbar focusing prevent configuration required
- ngx-perfect-scrollbar works properly in desktop but has some issue in IPad
- update perfect-scrollbar version to support minor releases to prevent scrollTop issues from the perfect-scrollbar package
- Support Angular 13
- Angular 13 ivy. Processing legacy "View Engine" libraries HOT 24
- SCRIPT1002 error in ie11 HOT 1
- Scrollbar is not activated when the 2nd last entry is split across two lines and thee min-scroll-bar-length is set
- update doc for scroll spy usage
- choppy scroll on touch devices
- Scroll not working for nested scroll containers on Mobile device.
- Angular 14: DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead
- [Angular 14] not able to import perfect-scrollbar.component.css
- how to set the minHeight of the Scroll bar
- Is it possible to wrap scrollable content inside a fixed div?
- Sticky Header
- Keyboard scroll not working in mat-select
- Sometime Scroll bottom not working it is stack, and notable to scroll. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-perfect-scrollbar.