MDBootstrap Angular – Universal server side rendering errors

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDBootstrap Angular – Universal server side rendering errors

nemesh pro asked 7 years ago

Hi, I bought MDBootstrap Angular version and tried using it with aspnetcore-angular2-universal.

I gave alot of errors like KeyboardEvent is not defined, window is not defined, MouseEvent is not defined.

After searching for a few minutes, I found the problem is with the MDBootstrap Angular code itself.

If window, KeyboardEvent, MouseEvent, or event is used in constructor or ngOninit or hostListener, it throws an error since the code is still rendering on server and not yet transferred to client's browser.

Please go through these documents regarding the same.

https://github.com/MarkPieszak/aspnetcore-angular2-universal#gotchas

http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener/

https://malcoded.com/posts/server-rendering-pitfalls

Can MDBootstrap angular be made compatible with Server Side Rendering?

nemesh pro answered 7 years ago

Here's the link where I tried changing KeyboardEvent, Event to any and made it working for server side rendering   https://imgur.com/a/qjr1Q

Dawid Adach pro commented 7 years ago

Hi Namesh, thanks for the link. We didn't test it with angular universal yet. I know that some of our customers were working on that. We have this in our Idea list however for now I cannot provide you with estimated delivery time as we are focusing on adding new components to Angular version to align it with jQuery.

beachjf pro commented 7 years ago

@nemesh, what you did we hammer.js issue ? NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined thanks a lot

Hosboss pro answered 7 years ago

Hello, I have the same problem, could you advance on a solution? Thanks in advance.

beachjf pro answered 7 years ago

Hi, I have the same problem, That for sure need to be fix, otherwise we can't use mdbootstrap for a public website Please keep us up to date when do you think mdbootstrap will be SSR ready.   Thanks a lot

Damian Gemza staff answered 7 years ago

Dear beachjf, We're glad to announce, that in next release our MDB Angular will be compatible with Universal (SSR). New release should be live today. For now, you can download dev version of new release, which includes SSR fixes from our GitLab dev branch. You can fix problem with hammerJS by adding this library to whitelist in your webpack.config.js file. Here's the code snippet: 
target: 'node',

externals: [nodeExternals({

whitelist: [

/^@agm/core/,

/^hammerjs/

]

})],
Best Regards, Damian

beachjf pro commented 7 years ago

Hi Damian, this is a GREAT news. Thank you so much :) you just made my year.

Damian Gemza staff commented 7 years ago

Release is ready to use! Feel free to update your project and test our Universal compatibility.

id90travel pro commented 7 years ago

This is still not working for me. I still get the KeyboardEvent is not defined error.

beachjf pro answered 7 years ago

@id90travel In my case it's working properly since I updated to the 5.2.3 version. I suggest you to npm cache clear --force npm i @Damian For the Hammerjs issue on the PRO version, I found that you import "hammerjs" In my case, I comment out this import and imported it in main.ts file since hammerjs is only use by the client side. for the agm_core, I use that post but not tested yet. https://gist.github.com/ferdiemmen/2adf128ce23252abfc25e958541ace9e   Thanks a lot

Damian Gemza staff commented 7 years ago

Dear Beachjf, did you read our configuration tutorial? For AGM and HammerJS you have to add those two modules to your whitelist in your webpack.config file. Here's link to the tutorial: https://mdbootstrap.com/angular/angular-universal/ Please configure your SSR with advices from my link, and everything should work just fine. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
nemesh
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets