question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Datepicker not work for angular 7 SSR

See original GitHub issue

As mentioned on npm this datepicker is for angular 6+.Here 6+ means above angular 6.I am now using angular 7.1.1 and date picker version is -

"ng-pick-datetime": "^7.0.0", "@angular/core": "^7.1.2", **

It gives the following problem after creating the build and running on node server-

**

/home/omkar/Workspace/Angular7/dist/server.js:258752
        __metadata("design:paramtypes", [Event]),
                                         ^

ReferenceError: Event is not defined

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
morozeckiycommented, Mar 18, 2019

Solution => In server.ts global[‘Event’]=null

Could you please post that bit of code from your actual implementation?

`// These are important and needed before anything else import ‘zone.js/dist/zone-node’; import ‘reflect-metadata’;

import {renderModuleFactory} from ‘@angular/platform-server’; import {enableProdMode} from ‘@angular/core’;

import * as express from ‘express’; import {join} from ‘path’; import {readFileSync} from ‘fs’;

// Faster server renders w/ Prod mode (dev mode never needed) enableProdMode();

// Express server const app = express(); const domino = require(‘domino’); const PORT = 5200; const DIST_FOLDER = join(process.cwd(), ‘’);

// Our index.html we’ll use as our template const template = readFileSync(join(DIST_FOLDER, ‘’, ‘index.html’)).toString(); const win = domino.createWindow(template); global[‘window’] = win; global[‘window’].requestAnimationFrame = {}; global[‘document’] = win.document;

global[‘Event’] = null; global[‘KeyboardEvent’] = null; global[‘Element’] = {}; global[‘Element’].prototype = {}; global[‘Element’].prototype.remove = undefined;

// * NOTE :: leave this as require() since this file is built Dynamically from webpack const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require(‘./dist/server/main’);

const {provideModuleMap} = require(‘@nguniversal/module-map-ngfactory-loader’);

app.engine(‘html’, (_, options, callback) => { renderModuleFactory(AppServerModuleNgFactory, { // Our index.html document: template, url: options.req.url, // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it) extraProviders: [ provideModuleMap(LAZY_MODULE_MAP) ] }).then(html => { callback(null, html); }); });

app.set(‘view engine’, ‘html’); app.set(‘views’, join(DIST_FOLDER, ‘’));

// Server static files from /browser app.get(‘.’, express.static(join(DIST_FOLDER, ‘’)));

// All regular routes use the Universal engine app.get(‘*’, (req, res) => { res.render(join(DIST_FOLDER, ‘’, ‘index.html’), {req}); });

// Start up the Node server app.listen(PORT, () => { console.log(Node server listening on http://localhost:${PORT}); }); `

0reactions
rajivkrcommented, Jul 18, 2020

Still facing the issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

getting "SyntaxError: Unexpected token {" in my-date-picker in ...
You need to use the new version of the component: angular-mydatepicker. https://github.com/kekeh/angular-mydatepicker.
Read more >
Datepicker is not popping up with ng-bootstrap-angular.js
Coding example for the question Datepicker is not popping up with ng-bootstrap-angular.js.
Read more >
Datepicker - Angular powered Bootstrap
Datepicker uses NgbDateStruct interface as a model and not the native Date object. It's a simple data structure with 3 fields, but note...
Read more >
Why I don't use web components - DEV Community ‍ ‍
For my first post on dev.to I thought I'd write about a nice, safe topic that's free of controversy: web components.
Read more >
How To Use jQuery With Angular (When You Absolutely Have ...
Making jQuery library 'Global' ... In jQuery module, jquery.min.js under 'dis' folder is not public. To make jQuery global, head over to .angular- ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found