ngx-swiper mocks for angular universal

app.server.module.ts

// ^ import the SwiperDirective MOCK we made, and include it in your AppServerModule @NgModule 
 
  declarations: [
    SwiperDirective // <-- this is the mock we made above
  ],

mock-ngx-swiper-directive.js

"use strict";
// var Swiper = require("swiper");
var core_1 = require("@angular/core");
var core_2 = require("@angular/core");
var core_3 = require("@angular/core");
// var swiper_interfaces_1 = require("ngx-swipper-wrapper/dist/lib/swiper.interfaces");
var SwiperDirective = (function () {
    function SwiperDirective(zone, elementRef, differs, defaults) {
        this.zone = zone;
        this.elementRef = elementRef;
        this.differs = differs;
        this.defaults = defaults;
        this.fxShow = true;
        this.fxHide = false;
        this.hidden = false;
        this.disabled = false;
        this.useSwiperClass = true;
        this.runInsideAngular = false;
        this.indexChange = new core_3.EventEmitter();
        this.S_INIT = new core_3.EventEmitter();
        this.S_DESTROY = new core_3.EventEmitter();
        this.S_SCROLL = new core_3.EventEmitter();
        this.S_PROGRESS = new core_3.EventEmitter();
        this.S_SETTRANSLATE = new core_3.EventEmitter();
        this.S_SETTRANSITION = new core_3.EventEmitter();
        this.S_AUTOPLAY = new core_3.EventEmitter();
        this.S_AUTOPLAYSTART = new core_3.EventEmitter();
        this.S_AUTOPLAYSTOP = new core_3.EventEmitter();
        this.S_REACHBEGINNING = new core_3.EventEmitter();
        this.S_REACHEND = new core_3.EventEmitter();
        this.S_SLIDECHANGESTART = new core_3.EventEmitter();
        this.S_SLIDECHANGEEND = new core_3.EventEmitter();
        this.S_SLIDENEXTSTART = new core_3.EventEmitter();
        this.S_SLIDENEXTEND = new core_3.EventEmitter();
        this.S_SLIDEPREVSTART = new core_3.EventEmitter();
        this.S_SLIDEPREVEND = new core_3.EventEmitter();
        this.S_SLIDERMOVE = new core_3.EventEmitter();
        this.S_CLICK = new core_3.EventEmitter();
        this.S_TAP = new core_3.EventEmitter();
        this.S_DOUBLETAP = new core_3.EventEmitter();
        this.S_TOUCHSTART = new core_3.EventEmitter();
        this.S_TOUCHMOVE = new core_3.EventEmitter();
        this.S_TOUCHMOVEOPPOSITE = new core_3.EventEmitter();
        this.S_TOUCHEND = new core_3.EventEmitter();
        this.S_TRANSITIONSTART = new core_3.EventEmitter();
        this.S_TRANSITIONEND = new core_3.EventEmitter();
        this.S_IMAGESREADY = new core_3.EventEmitter();
        this.S_LAZYIMAGELOAD = new core_3.EventEmitter();
        this.S_LAZYIMAGEREADY = new core_3.EventEmitter();
        this.S_PAGINATIONRENDERED = new core_3.EventEmitter();
    }
    Object.defineProperty(SwiperDirective.prototype, "index", {
        // set: function (index) {
        //     if (index != null) {
        //         this.setIndex(index);
        //     }
        // },
        // enumerable: true,
        // configurable: true
    });
    SwiperDirective.prototype.ngOnInit = function () {
        // var _this = this;
        // var element = this.elementRef.nativeElement;
        // // var options = new swiper_interfaces_1.SwiperConfig(this.defaults);
        // options.assign(this.config); // Custom config
        // if (this.initialIndex != null) {
        //     options.initialSlide = this.initialIndex;
        // }
        // var onSlideChangeStart = options.onSlideChangeStart;
        // var onScrollbarDragEnd = options.onScrollbarDragEnd;
        // options.onSlideChangeStart = function (swiper) {
        //     if (onSlideChangeStart) {
        //         onSlideChangeStart(swiper);
        //     }
        //     _this.zone.run(function () {
        //         _this.indexChange.emit(swiper.snapIndex);
        //     });
        // };
        // options.onScrollbarDragEnd = function (swiper) {
        //     if (onScrollbarDragEnd) {
        //         onScrollbarDragEnd(swiper);
        //     }
        //     _this.zone.run(function () {
        //         _this.indexChange.emit(swiper.snapIndex);
        //     });
        // };
        // if (typeof options.scrollbar === 'string') {
        //     options.scrollbar = element.querySelector(options.scrollbar);
        // }
        // if (typeof options.pagination === 'string') {
        //     options.pagination = element.querySelector(options.pagination);
        // }
        // if (typeof options.prevButton === 'string') {
        //     options.prevButton = element.querySelector(options.prevButton);
        // }
        // if (typeof options.nextButton === 'string') {
        //     options.nextButton = element.querySelector(options.nextButton);
        // }
        // if (this.runInsideAngular) {
        //     this.swiper = new Swiper(element, options);
        // }
        // else {
        //     this.zone.runOutsideAngular(function () {
        //         _this.swiper = new Swiper(element, options);
        //     });
        // }
        // this.S_INIT.emit(this.swiper);
        // // Add native swiper event handling
        // swiper_interfaces_1.SwiperEvents.forEach(function (eventName) {
        //     eventName = eventName.replace('swiper', '');
        //     eventName = eventName.charAt(0).toLowerCase() + eventName.slice(1);
        //     _this.swiper.on(eventName, function () {
        //         var args = [];
        //         for (var _i = 0; _i < arguments.length; _i++) {
        //             args[_i] = arguments[_i];
        //         }
        //         if (args.length === 1) {
        //             args = args[0];
        //         }
        //         if (_this["S_" + eventName.toUpperCase()]) {
        //             _this["S_" + eventName.toUpperCase()].emit(args);
        //         }
        //     });
        // });
        // if (!this.configDiff) {
        //     this.configDiff = this.differs.find(this.config || {}).create(null);
        // }
    };
    SwiperDirective.prototype.ngDoCheck = function () {
        // var _this = this;
        // var changes = this.configDiff.diff(this.config || {});
        // if (changes) {
        //     this.initialIndex = this.getIndex();
        //     changes.forEachAddedItem(function (changed) {
        //         if (changed.key === 'initialSlide') {
        //             _this.initialIndex = _this.config.initialSlide;
        //         }
        //     });
        //     this.ngOnDestroy();
        //     // Timeout is needed for the styles to update properly
        //     setTimeout(function () {
        //         _this.ngOnInit();
        //     }, 0);
        // }
    };
    SwiperDirective.prototype.ngOnDestroy = function () {
        var _this = this;
        if (this.swiper) {
            if (this.runInsideAngular) {
                this.swiper.destroy(true, true);
            }
            else {
                this.zone.runOutsideAngular(function () {
                    _this.swiper.destroy(true, true);
                });
            }
            this.swiper = null;
        }
    };
    SwiperDirective.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (this.swiper && ((changes['hidden'] && this.hidden) ||
            (changes['fxHide'] && this.fxHide) || (changes['fxShow'] && !this.fxShow))) {
            // For some reason resize causes Swiper to change index when hidden
            this.initialIndex = this.swiper.activeIndex || 0;
        }
        if (this.swiper && ((changes['hidden'] && !this.hidden) ||
            (changes['fxHide'] && !this.fxHide) || (changes['fxShow'] && this.fxShow))) {
            // For some reason resize causes Swiper to change index when hidden
            this.swiper.activeIndex = this.initialIndex || 0;
            this.update(true);
        }
        if (this.swiper && changes['disabled']) {
            if (changes['disabled'].currentValue != changes['disabled'].previousValue) {
                if (changes['disabled'].currentValue === true) {
                    if (this.runInsideAngular) {
                        this.swiper.lockSwipes();
                    }
                    else {
                        this.zone.runOutsideAngular(function () {
                            _this.swiper.lockSwipes();
                        });
                    }
                }
                else if (changes['disabled'].currentValue === false) {
                    if (this.runInsideAngular) {
                        this.swiper.unlockSwipes();
                    }
                    else {
                        this.zone.runOutsideAngular(function () {
                            _this.swiper.unlockSwipes();
                        });
                    }
                }
            }
        }
    };
    SwiperDirective.prototype.update = function (updateTranslate) {
        var _this = this;
        setTimeout(function () {
            if (_this.swiper) {
                if (_this.runInsideAngular) {
                    _this.swiper.update();
                    if (updateTranslate) {
                        setTimeout(function () {
                            if (_this.swiper) {
                                _this.swiper.update(true);
                            }
                        }, 0);
                    }
                }
                else {
                    _this.zone.runOutsideAngular(function () {
                        _this.swiper.update();
                        if (updateTranslate) {
                            setTimeout(function () {
                                if (_this.swiper) {
                                    _this.swiper.update(true);
                                }
                            }, 0);
                        }
                    });
                }
            }
        }, 0);
    };
    SwiperDirective.prototype.getIndex = function () {
        if (!this.swiper) {
            return this.initialIndex;
        }
        else {
            var index = this.swiper.activeIndex;
            if (this.swiper.params.loop) {
                var slidesCount = this.swiper.slides.length - 2 * this.swiper.loopedSlides;
                index -= this.swiper.loopedSlides;
                if (index < 0) {
                    index += slidesCount;
                }
                else if (index >= slidesCount) {
                    index -= slidesCount;
                }
            }
            return index;
        }
    };
    SwiperDirective.prototype.setIndex = function (index, speed, silent) {
        var _this = this;
        if (!this.swiper || this.hidden || this.fxHide || !this.fxShow) {
            this.initialIndex = index;
        }
        else {
            var realIndex = index * this.swiper.params.slidesPerGroup;
            if (this.swiper.params.loop) {
                realIndex += this.swiper.loopedSlides;
            }
            if (this.runInsideAngular) {
                this.swiper.slideTo(index, speed, !silent);
            }
            else {
                this.zone.runOutsideAngular(function () {
                    _this.swiper.slideTo(index, speed, !silent);
                });
            }
        }
    };
    SwiperDirective.prototype.prevSlide = function (speed, silent) {
        var _this = this;
        if (this.swiper) {
            if (this.runInsideAngular) {
                this.swiper.slidePrev(!silent, speed);
            }
            else {
                this.zone.runOutsideAngular(function () {
                    _this.swiper.slidePrev(!silent, speed);
                });
            }
        }
    };
    SwiperDirective.prototype.nextSlide = function (speed, silent) {
        var _this = this;
        if (this.swiper) {
            if (this.runInsideAngular) {
                this.swiper.slideNext(!silent, speed);
            }
            else {
                this.zone.runOutsideAngular(function () {
                    _this.swiper.slideNext(!silent, speed);
                });
            }
        }
    };
    SwiperDirective.prototype.stopAutoplay = function (reset) {
        var _this = this;
        if (reset) {
            this.setIndex(0);
        }
        if (this.swiper) {
            if (this.runInsideAngular) {
                this.swiper.stopAutoplay();
            }
            else {
                this.zone.runOutsideAngular(function () {
                    _this.swiper.stopAutoplay();
                });
            }
        }
    };
    SwiperDirective.prototype.startAutoplay = function (reset) {
        var _this = this;
        if (reset) {
            this.setIndex(0);
        }
        if (this.swiper) {
            if (this.runInsideAngular) {
                this.swiper.startAutoplay();
            }
            else {
                this.zone.runOutsideAngular(function () {
                    _this.swiper.startAutoplay();
                });
            }
        }
    };
    return SwiperDirective;
}());
SwiperDirective.decorators = [
    { type: core_2.Directive, args: [{
                selector: '[swiper]'
            },] },
];
/** @nocollapse */
SwiperDirective.ctorParameters = function () { return [
    { type: core_1.NgZone, },
    { type: core_3.ElementRef, },
    { type: core_1.KeyValueDiffers, },
    // { type: swiper_interfaces_1.SwiperConfig, decorators: [{ type: core_2.Optional },] },
]; };
SwiperDirective.propDecorators = {
    'index': [{ type: core_3.Input },],
    'fxShow': [{ type: core_3.Input },],
    'fxHide': [{ type: core_3.Input },],
    'hidden': [{ type: core_3.Input },],
    'disabled': [{ type: core_3.Input },],
    'useSwiperClass': [{ type: core_3.HostBinding, args: ['class.swiper',] }, { type: core_3.Input },],
    'runInsideAngular': [{ type: core_3.Input },],
    'config': [{ type: core_3.Input, args: ['swiper',] },],
    'indexChange': [{ type: core_3.Output },],
    'S_INIT': [{ type: core_3.Output, args: ['init',] },],
    'S_DESTROY': [{ type: core_3.Output, args: ['destroy',] },],
    'S_SCROLL': [{ type: core_3.Output, args: ['scroll',] },],
    'S_PROGRESS': [{ type: core_3.Output, args: ['progress',] },],
    'S_SETTRANSLATE': [{ type: core_3.Output, args: ['setTranslate',] },],
    'S_SETTRANSITION': [{ type: core_3.Output, args: ['setTransition',] },],
    'S_AUTOPLAY': [{ type: core_3.Output, args: ['autoplay',] },],
    'S_AUTOPLAYSTART': [{ type: core_3.Output, args: ['autoplayStart',] },],
    'S_AUTOPLAYSTOP': [{ type: core_3.Output, args: ['autoplayStop',] },],
    'S_REACHBEGINNING': [{ type: core_3.Output, args: ['reachBeginning',] },],
    'S_REACHEND': [{ type: core_3.Output, args: ['reachEnd',] },],
    'S_SLIDECHANGESTART': [{ type: core_3.Output, args: ['slideChangeStart',] },],
    'S_SLIDECHANGEEND': [{ type: core_3.Output, args: ['slideChangeEnd',] },],
    'S_SLIDENEXTSTART': [{ type: core_3.Output, args: ['slideNextStart',] },],
    'S_SLIDENEXTEND': [{ type: core_3.Output, args: ['slideNextEnd',] },],
    'S_SLIDEPREVSTART': [{ type: core_3.Output, args: ['slidePrevStart',] },],
    'S_SLIDEPREVEND': [{ type: core_3.Output, args: ['slidePrevEnd',] },],
    'S_SLIDERMOVE': [{ type: core_3.Output, args: ['sliderMove',] },],
    'S_CLICK': [{ type: core_3.Output, args: ['swiperClick',] },],
    'S_TAP': [{ type: core_3.Output, args: ['swiperTap',] },],
    'S_DOUBLETAP': [{ type: core_3.Output, args: ['swiperDoubleTap',] },],
    'S_TOUCHSTART': [{ type: core_3.Output, args: ['swiperTouchStart',] },],
    'S_TOUCHMOVE': [{ type: core_3.Output, args: ['swiperTouchMove',] },],
    'S_TOUCHMOVEOPPOSITE': [{ type: core_3.Output, args: ['swiperTouchMoveOpposite',] },],
    'S_TOUCHEND': [{ type: core_3.Output, args: ['swiperTouchEnd',] },],
    'S_TRANSITIONSTART': [{ type: core_3.Output, args: ['swiperTransitionStart',] },],
    'S_TRANSITIONEND': [{ type: core_3.Output, args: ['swiperTransitionEnd',] },],
    'S_IMAGESREADY': [{ type: core_3.Output, args: ['imagesReady',] },],
    'S_LAZYIMAGELOAD': [{ type: core_3.Output, args: ['lazyImageLoad',] },],
    'S_LAZYIMAGEREADY': [{ type: core_3.Output, args: ['lazyImageReady',] },],
    'S_PAGINATIONRENDERED': [{ type: core_3.Output, args: ['paginationRendered',] },],
};
exports.SwiperDirective = SwiperDirective;

mock-swiper-js.js

module.exports = (function () {
  function Swiper() {
  }
  return Swiper;
});

ngx-swiper-directive.mock.ts

import { Directive } from '@angular/core';
import { Input } from '@angular/core';

/* tslint:disable */
@Directive({ selector: '[swiper]' })
export class SwiperDirective {
  @Input() public config: any;
}

webpack.config.server.js

const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');

// then in your plugins add... 

   plugins: [
    new NormalModuleReplacementPlugin(
      /swiper.js/,
      path.resolve(__dirname, 'src/server-mocks/mock-swiper-js.js')
    ),
    new NormalModuleReplacementPlugin(
      /swiper.directive/,
      path.resolve(__dirname, 'src/server-mocks/mock-ngx-swiper-directive.js')
    )
  ]