ng-simple-slideshow
ng-simple-slideshow copied to clipboard
dockleryxk
Doesn't work with Angular 9
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!!
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]
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
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!
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)
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
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 usagesection)
Would love to see your code along with package.json
I did try to add the beta version and there was no luck.
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)
I tried this with a brand new project. Don't have any entryComponents on mine.
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>
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.
Fix it, in my case, was that I didn't have display = block, I had display = flex.
When I changed it, it worked!
Fixed it. For my removing the «position=relative» on slideshow-container resolved the problem
