search

Nolanus / ngx-page-scroll

Animated scrolling functionality for angular written in pure typescript
https://nolanus.github.io/ngx-page-scroll/
MIT License
476 stars 107 forks source link

Can't make it work with lazy modules #351

Closed clegeard closed 5 years ago

clegeard commented 5 years ago

Hi, I just can't make it work in my app in which I am using lazy modules. I have added NgxPageScrollCoreModule.forRoot() in my app.module.ts and created a shared module with NgxPageScrollModule, which I am importing in my lazy modules. There is no errors in the console, the only error I get is when the anchor is not defined "Scrolling not possible, as we can't find the specified target" which is normal and proves the module is responding. What am I missing? Thanks

Nolanus commented 5 years ago

Hi @clegeard,

what is triggering the scroll animation: a link on the same page or an async event? Are you trying the cross-route scrolling feature with a lazy-loaded route? If you've got a minute, maybe consider creating a demo showcasing the problem. You can start using the angular7 lazy-loading stackblitz template by forking it: https://stackblitz.com/edit/angular-7-lazy-loading

clegeard commented 5 years ago

Hi @Nolanus, I tried to do what you say and it is working fine. I think the problem is due to the theme I am using (Fuse), something obvious I suppose, but the theme is so complex I don't where to start. As I said before, I think the way I have imported the modules is ok as there is no error, but when I click on the link to the anchor, no scrolling occurs. If I put a wrong anchor id, the function is fired and I got the error I mentioned before "Scrolling not possible, as we can't find the specified target". Here is the list of dependencies used in the project in case it could help: "dependencies": { "@agm/core": "1.0.0-beta.5", "@angular/animations": "7.2.1", "@angular/cdk": "7.2.1", "@angular/common": "7.2.1", "@angular/compiler": "7.2.1", "@angular/core": "7.2.1", "@angular/flex-layout": "7.0.0-beta.23", "@angular/forms": "7.2.1", "@angular/http": "7.2.1", "@angular/material": "7.2.1", "@angular/material-moment-adapter": "7.2.1", "@angular/platform-browser": "7.2.1", "@angular/platform-browser-dynamic": "7.2.1", "@angular/router": "7.2.1", "@ngrx/effects": "7.0.0", "@ngrx/router-store": "7.0.0", "@ngrx/store": "7.0.0", "@ngrx/store-devtools": "7.0.0", "ngx-page-scroll": "6.0.0-beta.1", "ngx-page-scroll-core": "6.0.0-beta.0", "@ngx-translate/core": "11.0.1", "@swimlane/dragula": "3.7.3", "@swimlane/ngx-charts": "10.0.0", "@swimlane/ngx-datatable": "14.0.0", "@swimlane/ngx-dnd": "6.0.0", "@types/prismjs": "1.9.0", "angular-calendar": "0.26.4", "angular-in-memory-web-api": "0.8.0", "chart.js": "2.7.3", "classlist.js": "1.1.20150312", "core-js": "2.6.2", "d3": "5.7.0", "date-fns": "1.30.1", "hammerjs": "2.0.8", "lodash": "4.17.11", "moment": "2.23.0", "ng2-charts": "1.6.0", "ngrx-store-freeze": "0.2.4", "ngx-color-picker": "7.3.0", "ngx-cookie-service": "2.1.0", "perfect-scrollbar": "1.4.0", "prismjs": "1.15.0", "rxjs": "6.3.3", "rxjs-compat": "6.3.3", "web-animations-js": "2.3.1", "zone.js": "0.8.28" }

Thanks

Nolanus commented 5 years ago

Hi @clegeard, please excuse the late response. It sounds like you have to use a different DOM element as scrolling container due to the way your theme styles the layout. Please check https://github.com/Nolanus/ngx-page-scroll/wiki/Using-the-right-scrolling-view on how to find it.