angular 7 works but errors in console

Paul75 commented 5 years ago

Hello,

I have this : <ngx-hm-carousel *ngIf="indicateurs" [(ngModel)]="currentIndex" (ngModelChange)="indexChanged($event)" [autoplay-speed]="10000" [between-delay]="1000" [autoplay]="true" [infinite]="infinite" [aniTime]="200" [disable-drag]="true" class="carousel c-accent"> .. </ngx-hm-carousel>

But the screen appear correctly but in console have :

ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addInfiniteElm (ngx-hm-carousel.js:602) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.init (ngx-hm-carousel.js:561) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.ngAfterViewInit (ngx-hm-carousel.js:483) at callProviderLifecycles (core.js:22317) at callElementProvidersLifecycles (core.js:22291) at callLifecycleHooksChildrenFirst (core.js:22281) at checkAndUpdateView (core.js:23217) at callViewAction (core.js:23449) at execEmbeddedViewsAction (core.js:23412) at checkAndUpdateView (core.js:23209)

Thanks

Paul75 commented 5 years ago

i see another closed isue that say it must do like exemple. But If I do this I have : ERROR TypeError: Cannot read property '5' of undefined at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addInfiniteElm (ngx-hm-carousel.js:603) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.init (ngx-hm-carousel.js:561) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.ngAfterViewInit (ngx-hm-carousel.js:483) at callProviderLifecycles (core.js:22317) at callElementProvidersLifecycles (core.js:22291) at callLifecycleHooksChildrenFirst (core.js:22281) at checkAndUpdateView (core.js:23217) at callViewAction (core.js:23449) at execEmbeddedViewsAction (core.js:23412) at checkAndUpdateView (core.js:23209)

Paul75 commented 5 years ago

I add the demo for error :

https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class-7sn2kt

thanks

ZouYouShun commented 5 years ago

@Paul75 Hi, In current version we need [data] on the ngx-hm-carousel

you need add that when using infinite mode or autoplay mode.

https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class-2yzpev?file=src/app/app.component.html

Paul75 commented 5 years ago

tha screen works without add data but with error in console. But if I add data now the screen appear 2 in the same page and got errors :

ERROR TypeError: Cannot set property 'position' of undefined at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setStyle (platform-browser.js:1118) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setStyle (core.js:24235) at ngx-hm-carousel.js:1083 at Array.forEach (<anonymous>) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addStyle (ngx-hm-carousel.js:1080) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addInfiniteElm (ngx-hm-carousel.js:606) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.init (ngx-hm-carousel.js:561) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.ngAfterViewInit (ngx-hm-carousel.js:483) at callProviderLifecycles (core.js:22317) at callElementProvidersLifecycles (core.js:22291)

thanks

ZouYouShun commented 5 years ago

could you show this in the https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class-7sn2kt

Is your #carouselContent like below?

  <ng-template #carouselContent let-avatar let-i="index">
      AAAA
  </ng-template>

we need a tag to include that in the container, like below


  <ng-template #carouselContent let-avatar let-i="index">
      <span> AAAA </span>
  </ng-template>

Paul75 commented 5 years ago

thanks but : https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class-7sn2kt?file=src%2Fapp%2Fapp.component.html

same erroer and add ....

ZouYouShun commented 5 years ago

Your template has many error with element, you should fix them, and the carousel will work.

https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class-nutr2z?file=src/app/app.component.html

because I using createEmbeddedView, angular will check the template is ok to render, if that has error the render will stop next action,

you should fix the template and it will work!

BTW.

using function in the template is a bad implement, suggest you using pure object to handle data.

And you can separate the template to small component to handle that, and make the template more readable.

like below


  <section ngx-hm-carousel-container class="content">
    <article class="item cursor-pointer"
      ngx-hm-carousel-item
      *ngFor="let indicateur of indicateurs; let i = index"
        [ngClass]="{'visible': currentIndex===i}">
        <some-component></some-component>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>

  <!-- only using in infinite mode or autoplay mode, that will render with-->
  <ng-template #carouselContent let-avatar let-i="index">
    <article class="item cursor-pointer"
      [ngClass]="{'visible': false}">
        <some-component></some-component>
    </article>
  </ng-template>

Tomdrouv1 commented 5 years ago

Hey @ZouYouShun I'm facing the same issue as @Paul75

Here is my template

<ngx-hm-carousel
            *ngIf="presses"
            class="carousel"
            [(ngModel)]="currentIndex"
            [show-num]="'auto'"
            [autoplay]="true"
            [autoplay-speed]="5000"
            [infinite]="infinite"
            [drag-many]="true"
            [aniTime]="200"
            [data]="presses">
        <section ngx-hm-carousel-container class="content">
            <article class="item pointer" ngx-hm-carousel-item *ngFor="let press of presses; let i = index"
                     [ngClass]="{'visible': currentIndex === i}">
                <img [alt]="press.alt" class="partner-image" height="60" [src]="press.src">
            </article>
            <ng-template #infiniteContainer></ng-template>
        </section>
        <ng-template #carouselContent let-avatar let-i="index">
            <article class="item pointer" [ngClass]="{'visible': currentIndex === i}">
                <img [alt]="avatar.alt" class="partner-image" height="60" [src]="avatar.src">
            </article>
        </ng-template>
    </ngx-hm-carousel>

Here is the error

ERROR TypeError: Cannot set property 'position' of undefined at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setStyle (platform-browser.js:1118) at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.setStyle (animations.js:242) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setStyle (core.js:24235) at ngx-hm-carousel.js:1083 at Array.forEach () at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addStyle (ngx-hm-carousel.js:1080) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addInfiniteElm (ngx-hm-carousel.js:606) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.init (ngx-hm-carousel.js:561) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.ngAfterViewInit (ngx-hm-carousel.js:483) at callProviderLifecycles (core.js:22317)

I hope you can help me on this

ZouYouShun commented 5 years ago

Hi @Tomdrouv1, I think your template is current, maybe the

<ngx-hm-carousel
            *ngIf="presses"

the condition with presses, should be press && presses.length , that currently has the problem with item number small than show-number and init with zero item.

if you can use that example to show the issue again, maybe I can help you directly https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint

Tomdrouv1 commented 5 years ago

Thanks for your answer @ZouYouShun but unfortunately even using your example, it shows the same issue..

ZouYouShun commented 5 years ago

Hi @Tomdrouv1 , if you can fork that example then parse the code and send the link back to me, maybe I can figure out what issue with that.

Tomdrouv1 commented 5 years ago

Hi @ZouYouShun,

I tried to repoduce the issue on Stackblitz with no success. I tried using this library in another project and it worked until I add SSR. I don't know if it's related to it or not.

Tomdrouv1 commented 5 years ago

I finally found the solution for this particuraly annoying issue!

After debugging step by step, I saw that the renderer found spaces inside the

 <ng-template #carouselContent></ng-template>

So I reindented my code inside this block and now it works well.

nfcf commented 5 years ago

Thanks for your investigation @Tomdrouv1, that fixed the issue for me also. Apparently that template doesn't support line breaks at all, so all the html inside that ng-template needs to be in 1 line...

ZouYouShun / ngx-hm-carousel

angular 7 works but errors in console #19