ANGULAR BOOTSTRAP 4.1.0 - Universal server side rendering er


Topic: ANGULAR BOOTSTRAP 4.1.0 - Universal server side rendering error

kepner pro premium priority asked 7 years ago

Hi, I have buyed the ANGULAR BOOTSTRAP 4.1.0 and have tried to use it with server side rendering(universal) to get better SEO on my websites. I used this description to setup the server side version https://www.techiediaries.com/angular-4-universal-server-side-rendering/. The dist compile is ok but after ts-node tries to render the modules I get an error: C:wamp64wwwmdb_angular>npm run start > quickstart-angular2@1.0.0 prestart C:wamp64wwwmdb_angular > ng build --prod && ngc Hash: 402eb09f99ad64523651 Time: 44368ms chunk {0} polyfills.9790f26caf3c1fcbea3d.bundle.js (polyfills) 305 kB {5} [initial] [rendered] chunk {1} main.9cdd66ab35a05392d772.bundle.js (main) 502 kB {4} [initial] [rendered] chunk {2} scripts.7c61938b5d64fee28703.bundle.js (scripts) 468 kB {5} [initial] [rendered] chunk {3} styles.3df9a62a54b0dca4104c.bundle.css (styles) 228 bytes {5} [initial] [rendered] chunk {4} vendor.5b04e60becce9ea2162f.bundle.js (vendor) 1.78 MB [initial] [rendered] chunk {5} inline.a7af60f61f54389ffcb7.bundle.js (inline) 0 bytes [entry] [rendered] > quickstart-angular2@1.0.0 start C:wamp64wwwmdb_angular > ts-node src/server.ts C:wamp64wwwmdb_angularsrcapptypescriptsangular-bootstrap-mdfreecarouselcarouselComponent.ts:410 @HostListener('keyup', ['$event']) keyboardControl(event: KeyboardEvent) { ^ ReferenceError: KeyboardEvent is not defined at Object.<anonymous> (C:wamp64wwwmdb_angularsrcapptypescriptsangular-bootstrap-mdfreecarouselcarouselComponent.ts:410:61) at Module._compile (module.js:570:32) at Module.m._compile (C:wamp64wwwmdb_angularnode_modulests-nodesrcindex.ts:406:23) at Module._extensions..js (module.js:579:10) at Object.require.extensions.(anonymous function) [as .ts] (C:wamp64wwwmdb_angularnode_modulests-nodesrcindex.ts:409:12) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Kepner\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "start" npm ERR! node v6.11.1 npm ERR! npm v3.10.7 npm ERR! code ELIFECYCLE npm ERR! quickstart-angular2@1.0.0 start: ts-node src/server.ts npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the quickstart-angular2@1.0.0 start script 'ts-node src/server.ts'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the quickstart-angular2 package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ts-node src/server.ts npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs quickstart-angular2 npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls quickstart-angular2 npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! C:wamp64wwwmdb_angularnpm-debug.log As I know the Mouse and KeyBoardEvents tags are not supported in node. I found a similar issue here https://github.com/valor-software/ngx-bootstrap/issues/964 but here was used webpack instead angular-cli and the solution was to use a regex to replace the Events with a node supported tag. Unfortunately I couldn't found any way to solve this issue with angular-cli. I would be happy if you could check it and if possible to find a solution for it. Thank you in advance.
Hi, Go to C:wamp64wwwmdb_angularsrcapptypescriptsangular-bootstrap-mdfreecarouselcarouselComponent.ts, and find ther KeyboardEvent and replace it to any. Regards

gauravsoni2k pro commented 7 years ago

@kepner I am also facing same issue have you found any solution ?

kepner pro premium priority commented 7 years ago

@gauravsoni2k I was able only to build the production app with the solution from Rafał, but by the rendering I got other error.

Did you try Rafał suggestion?

kepner pro premium priority commented 7 years ago

Yes I tried, but this will fix only this error. unfortunately there are more errors by the rendering of the app server side with nodejs.

Could you show me or write more about those errors?

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No