compatibility with Angular Universal about ngx-gallery HOT 5 CLOSED

I am not sure this will help you guys, but it worked for me.
I am using universal and got the same error (ReferenceError: KeyboardEvent is not defined) with the ng-gallery when running the build.

so first:

1. install regexp-replace-loader:
   npm install regexp-replace-loader --save-dev

2. then in weback.server.config.js add the below to the module > rules section:

module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      //below is the fix for image gallery keyboard error
      { test: /\.(ts|js)$/, 
        loader: 'regexp-replace-loader', 
        query: { 
            match: { 
                pattern: '\\[(Mouse|Keyboard)Event\\]', 
                flags: 'g' }, 
                replaceWith: '[]', 
            } 
        } 
    ]
  },

3. on your gallery component wrap the gallery.load with the isPlatformBrowser:

import { Component, Inject, OnInit, } from '@angular/core';
import { PLATFORM_ID }   from '@angular/core';  //<--  if browser
import { isPlatformBrowser, isPlatformServer } from '@angular/common';//<--  if browser
import { Gallery }  from 'ng-gallery';   //<-- image gallery

@Component({
    selector:    'image-gallery',
    templateUrl: './image-gallery.component.html',
})

export class ImageGalleryComponent implements OnInit {
        {
          src: 'images/logo.png',
          thumbnail: 'images/logo.png',
          text: 'ccc'
        },
        // ...
    ];

    constructor(
        public gallery: Gallery,
        @Inject(PLATFORM_ID) private platformId: Object //<-- if browser
    ) { }

    ngOnInit() {
        if (isPlatformBrowser(this.platformId)) { //<-- if browser
            this.gallery.load(this.images);
        }
        if (isPlatformServer(this.platformId)) {}        
    }
} 

Hope it will help someone as it helped me.
Cheers

from ngx-gallery.

Is this error showing in the building process or at runtime? please post the full error

from ngx-gallery.

I have the same error on angular 5.0.2 and universal 5.0.0-beta.5

/usr/src/app/dist/server.js:149337
    __metadata$1("design:paramtypes", [KeyboardEvent]),
                                       ^

ReferenceError: KeyboardEvent is not defined
    at Object.<anonymous> (/usr/src/app/dist/server.js:149337:40)
    at __webpack_require__ (/usr/src/app/dist/server.js:20:30)
    at Object.9QXJ (/usr/src/app/dist/server.js:146313:29448)
    at l (/usr/src/app/dist/server.js:146313:149)
    at Object.pfyn (/usr/src/app/dist/server.js:146313:161422)
    at l (/usr/src/app/dist/server.js:146313:149)
    at Object.5tsa (/usr/src/app/dist/server.js:146313:28218)
    at l (/usr/src/app/dist/server.js:146313:149)
    at Object.JwoV (/usr/src/app/dist/server.js:146313:98938)
    at l (/usr/src/app/dist/server.js:146313:149)

from ngx-gallery.

Thx, its work!

from ngx-gallery.

+1
Angular Universal support needed :)

from ngx-gallery.