Doesn't work with Angular 9

[ricardosobrado]

Hello everyone!
After updating Angular version from 8 to 9 this component started to give me an error in runtime (it compiles correctly).
The error occurs in "ng-simple-slideshow.js" :

setStyles() {
...
this._renderer.removeStyle(this.container.nativeElement, 'background-color');
}

The error is that "this.container" is null

Some help regarding this issue would be more than welcome!
Thank you!!

[tsenguunchik]

Can confirm. It is not working from a fresh angular 9 project

[soufianesakhi]

I had the same issue (Cannot read property 'nativeElement' of undefined, this.container being null).

You can update to the beta version to fix it: npm install [email protected]

[tsenguunchik]

When I used the beta version, the error is no longer there, but I don't see anything on the page. When I inspect it, the slideshow element is there but nothing to see visually

[ricardosobrado]

When I used the beta version, the error is no longer there, but I don't see anything on the page. When I inspect it, the slideshow element is there but nothing to see visually

Same happens to me!

[soufianesakhi]

I am currently using the beta in production, and it's working for me at least (example: https://simply-how.com/getting-started-with-java-11, right panel of the IntelliJ IDEA usage section)

[ibushah]

Same issue is happening with me i tried to fix it but it didn't go well .

[ibushah]

npm install [email protected] just type this on your terminal .beta version is working for me

[ibushah]

When I used the beta version, the error is no longer there, but I don't see anything on the page. When I inspect it, the slideshow element is there but nothing to see visually

Same happens to me!

[imageUrls]="imageSources" [height]="height" [minHeight]="minHeight" [arrowSize]="arrowSize" [showArrows]="showArrows" [disableSwiping]="disableSwiping" [autoPlay]="autoPlay" [stopAutoPlayOnSlide]="stopAutoPlayOnSlide" [debug]="debug" [backgroundSize]="backgroundSize" [backgroundPosition]="backgroundPosition" [backgroundRepeat]="backgroundRepeat" [showDots]="showDots" [dotColor]="dotColor" [showCaptions]="showCaptions" [captionColor]="captionColor" [captionBackground]="captionBackground" [lazyLoad]="lazyLoad" [hideOnNoSlides]="hideOnNoSlides" [fullscreen]="fullscreen">

ts code :

imageSources: (string | IImage)[] = [
{ url: 'https://cdn.vox-cdn.com/uploads/chorus_image/image/56748793/dbohn_170625_1801_0018.0.0.jpg', caption: 'The first slide', href: '#config' },
{ url: 'https://cdn.vox-cdn.com/uploads/chorus_asset/file/9278671/jbareham_170917_2000_0124.jpg', clickAction: () => alert('custom click function') },
{ url: 'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.jpg', caption: 'Apple TV', href: 'https://www.apple.com/' },
'https://cdn.vox-cdn.com/uploads/chorus_image/image/56674755/mr_pb_is_the_best.0.jpg',
{ url: 'assets/kitties.jpg', backgroundSize: 'contain', backgroundPosition: 'center' }
];
height: string = '400px';
minHeight: string;
arrowSize: string = '30px';
showArrows: boolean = true;
disableSwiping: boolean = false;
autoPlay: boolean = true;
autoPlayInterval: number = 3333;
stopAutoPlayOnSlide: boolean = true;
debug: boolean = false;
backgroundSize: string = 'cover';
backgroundPosition: string = 'center center';
backgroundRepeat: string = 'no-repeat';
showDots: boolean = true;
dotColor: string = '#FFF';
showCaptions: boolean = true;
captionColor: string = '#FFF';
captionBackground: string = 'rgba(0, 0, 0, .35)';
lazyLoad: boolean = false;
hideOnNoSlides: boolean = false;
width: string = '100%';
fullscreen: boolean = false;
enableZoom: boolean = false;
enablePan: boolean = false;
noLoop: boolean = false;

dont forget to install and import the necessary packages

[tsenguunchik]

I am currently using the beta in production, and it's working for me at least (example: https://simply-how.com/getting-started-with-java-11, right panel of the IntelliJ IDEA usage section)

Would love to see your code along with package.json

I did try to add the beta version and there was no luck.

[soufianesakhi]

I have also removed all the entryComponents in my modules after migrating to Angular 9, it might be it for you (they are now deprecated with the new Ivy compiler)

[tsenguunchik]

I tried this with a brand new project. Don't have any entryComponents on mine.

[soufianesakhi]

package.json:

{
  "...": "...",
  "dependencies": {
    "@angular/animations": "^9.1.2",
    "@angular/cdk": "^9.2.1",
    "@angular/common": "^9.1.2",
    "@angular/compiler": "^9.1.2",
    "@angular/core": "^9.1.2",
    "@angular/forms": "^9.1.2",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "^9.1.2",
    "@angular/platform-browser-dynamic": "^9.1.2",
    "@angular/platform-server": "^9.1.2",
    "@angular/router": "^9.1.2",
    "@nguniversal/common": "^9.1.0",
    "@nguniversal/express-engine": "^9.1.0",
    "ng-simple-slideshow": "^1.3.0-beta.11",
    "...": "...",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "^9.1.2",
    "@angular/language-service": "^9.1.2",
    "@nguniversal/builders": "^9.1.0",
    "typescript": "~3.8.3",
    "webpack-cli": "^3.1.2"
    "...": "...",
  }
}

app.module.ts & 1 another lazy loaded module where it's being used:

import { SlideshowModule } from "ng-simple-slideshow";
// ...

@NgModule({
  imports: [
    // ...
    SlideshowModule,
    // ...
  ]
})

page.component.ts:

import { MatDialog } from "@angular/material/dialog";
import { IImage } from "ng-simple-slideshow";

// ...
  constructor(
    public dialog: MatDialog,
    // ...
  ) {}
  
  // ...
  openSlideshow() {
    let images: IImage[];
    // ...
    
    this.dialog.open<SlideshowComponent, IImage[]>(SlideshowComponent, {
      data: images,
      width: "95vw",
      maxWidth: "100%",
      height: "95vh",
      maxHeight: "100%",
      panelClass: "slideshow-dialog",
    });
  }

slideshow.component.html:

<slideshow
  #slideshow
  [backgroundSize]="'contain'"
  [imageUrls]="images"
></slideshow>

[ashutoshkokam]

updating the package to [email protected], worked for me

[Ricardozs]

I have the latest Angular version and still doesn't work for me. I install the beta version and I don't see any error, but I just don't see the slider. And if I inspect my page I see it in the code with all its elements.

[Ricardozs]

Fix it, in my case, was that I didn't have display = block, I had display = flex.

When I changed it, it worked!

[awikatchikaen]

Fixed it. For my removing the «position=relative» on slideshow-container resolved the problem