ERROR TypeError: "this.container is undefined"

[Guley]

I am getting issue with angular 9

    setStyles ng-simple-slideshow.js:517
    ngDoCheck ng-simple-slideshow.js:189
    Angular 27
    RxJS 5
    Angular 9
core.js:5871:19

[Guley]

Above error on Mozilla firefox and getting below error On Chrome
ERROR TypeError: Cannot read property 'nativeElement' of undefined at SlideshowComponent.setStyles (ng-simple-slideshow.js:517) at SlideshowComponent.ngDoCheck (ng-simple-slideshow.js:189) at callHook (core.js:3939) at callHooks (core.js:3899) at executeInitAndCheckHooks (core.js:3840) at refreshView (core.js:11791) at refreshDynamicEmbeddedViews (core.js:13138) at refreshView (core.js:11796) at refreshComponent (core.js:13213) at refreshChildComponents (core.js:11504) defaultErrorLogger @ core.js:5871

[dockleryxk]

@Guley in the interest of transparency, I have not tried anything in Angular 9 yet... I can't say for certain what is causing this. I will look as soon as I have time. In the meantime, could you send some sample code or a way to reproduce this error? That would help a lot! Thanks

[Guley]

Setup a new angular setup using the latest cli and latest version of angular.
Here is Github repo with special access https://github.com/Guley/ng-simple-slideshow

Here is my sample code which I used in my work

IImage.ts:

export interface IImage {
    url: string | null;
    caption?: string;
    title?: string;
}


Tempalte:
<section class="slider" >
  <slideshow #slideshow id="slideshow" [imageUrls]="imageUrls"  [autoPlay]="true" ></slideshow>
</section>

Component.ts

import { Component, OnInit} from '@angular/core';
import {HttpService} from '../../services/http.service';
import { Router, ActivatedRoute } from '@angular/router';
import { PlatformLocation } from '@angular/common';
import { IImage } from '../../interfaces/IImage';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css'],
})

export class SliderComponent implements OnInit {
  resultdata: any = {}; 
  imageUrls: (string | IImage)[] = [{
          url : 'https://example.com/image/1.png',
          caption: 'Image 1',
          title: 'Image 1',
  },{
          url : 'https://example.com/image/2.png',
          caption: 'Image 2',
          title: 'Image 2',
  },{
          url : 'https://example.com/image/3.png',
          caption: 'Image 3',
          title: 'Image 3',
  }];
  constructor(private HttpService: HttpService,private router: Router){}


 /*Add images urls*/
  ngOnInit() {
    this.HttpService.postdata({}).subscribe( result  =>  {
           this.resultdata = result;
           if(this.resultdata.data.banners.length > 0){
              for (var i in this.resultdata.data.banners) {  
                this.imageUrls.push({
                          url : this.resultdata.data.banners[i].image.medium,
                          caption: this.resultdata.data.banners[i].description,
                          title: this.resultdata.data.banners[i].description,
                  });   
              }
           }
          });
  }
}

[Guley]

Here what I got while debugging issue. may this will help you out
Package "ng-simple-slideshow" has an incompatible peer dependency to "@angular/core" (requires "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" (extended), would install "9.1.0-next.4")

[dockleryxk]

That helps quite a bit actually!

[dockleryxk]

check beta.11, I have updated the peer dependencies

[Guley]

Do upgrade angular version from 6.0.1 to 9.1.0-next.4. Code working fine up to version 8 but issue arise in version 9

[ekhmoi]

In Angular9 ViewChild requires to specify {static: boolean}.

I think it can be fixed(maybe not completely) by adding {static: true} to below lines.

ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.ts

Line 66 in f563ac5

@ViewChild('container') container: ElementRef;

  @ViewChild('container', { static: true }) container: ElementRef;
  @ViewChild('prevArrow', { static: true }) prevArrow: ElementRef;
  @ViewChild('nextArrow', { static: true }) nextArrow: ElementRef;

[ruipsnogueira]

In Angular9 ViewChild requires to specify {static: boolean}.

I think it can be fixed(maybe not completely) by adding {static: true} to below lines.

ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.ts

Line 66 in f563ac5

@ViewChild('container') container: ElementRef;

  @ViewChild('container', { static: true }) container: ElementRef;
  @ViewChild('prevArrow', { static: true }) prevArrow: ElementRef;
  @ViewChild('nextArrow', { static: true }) nextArrow: ElementRef;

Is possible to create a beta version with this change?

Thanks!

[handihow]

Would be nice indeed if you can make an update that is compatible with Angular 9

[ekhmoi]

In Angular9 ViewChild requires to specify {static: boolean}.
I think it can be fixed(maybe not completely) by adding {static: true} to below lines.

ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.ts

Line 66 in f563ac5

@ViewChild('container') container: ElementRef;

  @ViewChild('container', { static: true }) container: ElementRef;
  @ViewChild('prevArrow', { static: true }) prevArrow: ElementRef;
  @ViewChild('nextArrow', { static: true }) nextArrow: ElementRef;

Is possible to create a beta version with this change?

Thanks!

I can upgrade library to Angular 9 and make a PR. But @dockleryxk can approve and create a beta version.