Open Closed

ABP is not compatible with Angular Universal(Server Side Rendering) #4765


User avatar
0
maris.vigulis created
  • ABP Framework version: v7.1.0
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace: see decription below
  • Steps to reproduce the issue:
  1. Create a empty ABP project of version 7.1.0 with angular frontend.
  2. run next command in command prompt: ng add @nguniversal/express-engine
  3. run next command in command prompt: npm run dev:ssr Result: Failure on startup inside @abp/ng.oauth (code inside compiled vendor.js included below):

To investigate problem deeper I have replaced directly in vendor.js that line with: const oAuthStorage = {getItem: function() {}, setItem: function(){}, removeItem: function(){}, clear: function(){}, keys: function(){}}; This line has passed however it failed further. I found out that there is a chain of other troubles inside of ABP:

  1. Then LeptonX failed, cause it has a direct access to window object in it. Fortunately I had a sourceCode of it, so I found out that I can replace createWindowProvider in ThemeLeptonXModule with my own like so:
  2. Also I had to do a next manipulation in server.ts to make it work: (but it's typical for SSR setup in angular),
  3. Finally nodejs server launched and started to listen to 4000 port, however endpoints calls to .NET backend are failing with status 0, to endpoints 'https://localhost:44328/.well-known/openid-configuration', 'https://localhost:44328/api/abp/application-configuration'. I have checked with browser, both URLs are accessible. My wild guess that there is some Abp request interceptors that prevents a requests from being sent in SSR mode(cant investigate deeper, since I don't have enough knowledge of underlying kitchen of abp).

Similar issue was reported here on github, here: https://github.com/abpframework/abp/issues/15782


7 Answer(s)
  • User Avatar
    0
    mahmut.gundogdu created

    (from the morning) In my local, I am working on it. I have added angular universal. I am solving SSR issues. I will inform you. I may not completed in today. so I just want to say "I couldn't find fix yet but I am keep continue to working on it."

  • User Avatar
    0
    maris.vigulis created

    Thank you for an update Mahmut and your effort! No worries I was not expecting to get a fix today. It would be lovely to get some fix in upcoming week or two. I bet a fix will require several patches inside of ABP.

  • User Avatar
    0
    mahmut.gundogdu created

    I have abstracted all storage functionaly from localstorage object. I have created cookie based storage too. I am still working on It. I couldn't fix fully yet. I will inform you.

  • User Avatar
    0
    maris.vigulis created

    Thank you for an update Mahmut!

  • User Avatar
    0
    maris.vigulis created

    Hello Mahmut, any update on this ticket?

  • User Avatar
    0
    maris.vigulis created

    @mahmut.gundogdu is there any estimate, when а problem could be solved?

  • User Avatar
    0
    mahmut.gundogdu created

    I couldn't gave any deadline for this issue because so much code did not compatible with Server-side rendering yet. As a abp team we have task for that. We can implement soon as possible. Sorry for the delay. Also I have refund your credit.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11