Carousel issue in SSR rendering

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Carousel issue in SSR rendering

Gaurav Garg pro asked 7 years ago

Hi Team, Another issue in carousel because of this issue i am not able to release my website in production. 
Start your code here
Error: Position is out of the list
    at LinkedList../src/app/ng-uikit-pro-standard/free/utils/linked-list.class.ts.LinkedList.remove (E:devmigration-builddistserver.js:94637:19)
    at CarouselComponent../src/app/ng-uikit-pro-standard/free/carousel/carousel.component.ts.CarouselComponent.removeSlide (E:devmigration-builddistserver.js:92642:26)
    at SlideComponent../src/app/ng-uikit-pro-standard/free/carousel/slide.component.ts.SlideComponent.ngOnDestroy (E:devmigration-builddistserver.js:93045:23)
    at callProviderLifecycles (E:devmigration-builddistserver.js:14297:18)
    at callElementProvidersLifecycles (E:devmigration-builddistserver.js:14265:13)
    at callLifecycleHooksChildrenFirst (E:devmigration-builddistserver.js:14255:29)
    at destroyView (E:devmigration-builddistserver.js:15319:5)
    at callViewAction (E:devmigration-builddistserver.js:15445:13)
    at execComponentViewsAction (E:devmigration-builddistserver.js:15367:13)
    at destroyView (E:devmigration-builddistserver.js:15318:5)



Start your code here
<mdb-carousel [isControls]="true"class="carousel slide" [type]="'carousel-multi-item'" [animation]="'slide'"> <!--First slide--> <mdb-slide> <divclass="col-md-4"> <divclass="card"> <imgclass="img-fluid"src="assets/img/partners/1.jpg"alt="Card image cap"> </div> </div> <divclass="col-md-4 clearfix d-none d-md-block"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"alt="Card image cap"> </div> </div> <divclass="col-md-4 clearfix d-none d-md-block"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"alt="Card image cap"> </div> </div> </mdb-slide> <!--/First slide--> <!--Second slide--> <mdb-slide> <divclass="col-md-4"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg"alt="Card image cap"> </div> </div> <divclass="col-md-4 clearfix d-none d-md-block"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg"alt="Card image cap"> </div> </div> <divclass="col-md-4 clearfix d-none d-md-block"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg"alt="Card image cap"> </div> </div> </mdb-slide> <!--/Second slide--> <!--Third slide--> <mdb-slide> <divclass="col-md-4"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg"alt="Card image cap"> </div> </div> <divclass="col-md-4 clearfix d-none d-md-block"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg"alt="Card image cap"> </div> </div> <divclass="col-md-4 clearfix d-none d-md-block"> <divclass="card"> <imgclass="img-fluid"src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg"alt="Card image cap"> </div> </div> </mdb-slide> <!--/Third slide--> </mdb-carousel> <!--/.Carousel Wrapper-->  

Damian Gemza staff commented 7 years ago

Dear Guarav Garg, Could you please provide me reproduction steps? I'm unable to reproduce your error. Please describe in which situation you're getting this error. Best Regards, Damian

vialeda pro premium priority answered 6 years ago

I got the same problem as Gaurav Garg. You can reproduce the error by having two templates. One template for the home page and another template for the other pages. When you redirect frrom the home page to a page where the carousel is, you will get the error. This cause also a delay for rendering. If you use only one template in the entire apps you won't get the error. Here the html to switch between templates: <ng-container *ngIf="homePage === true"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <router-outlet></router-outlet> </div> </div> </div> </ng-container> <ng-container *ngIf="homePage === false && fullPage == false"> <header> <app-side-nav></app-side-nav> </header> <main> <div class="main-wrapper"> <div class='container-fluid'> <div class='row'> <div class='col-md-12' style="margin-top: 2rem;"> <div class="card card-cascade wider reverse"> <div class="view view-cascade overlay"> <img src="../../assets/Images/index-1_img07.jpg" alt="Wide sample post image" class="img-fluid"> <a> <div class="mask rgba-white-slight waves-effect waves-light"></div> </a> </div> <div class="card-body card-body-cascade text-center"> <router-outlet></router-outlet> </div> </div> </div> </div> </div> </div> </main> <app-contact-form></app-contact-form> </ng-container>

Damian Gemza staff answered 6 years ago

Dear Vialeda, Could you please send me a reproduction example / repository at d.gemza@mdbootstrap.com ? Unfortunately, I'm unable to reproduce your problem. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
Gaurav Garg
Pro User
14Support score
9Questions 14Answers
0Snippets likes 0Snippets