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:

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. https://github.com/dockleryxk/ng-simple-slideshow/blob/f563ac58b8c20e27caeaa0be9b2258560604b99a/src/app/modules/slideshow/slideshow.component.ts#L66

  @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. https://github.com/dockleryxk/ng-simple-slideshow/blob/f563ac58b8c20e27caeaa0be9b2258560604b99a/src/app/modules/slideshow/slideshow.component.ts#L66

  @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. https://github.com/dockleryxk/ng-simple-slideshow/blob/f563ac58b8c20e27caeaa0be9b2258560604b99a/src/app/modules/slideshow/slideshow.component.ts#L66

  @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.