Toggling between 2 adapted portlets fails when SPA is active

[izaera]

Source: https://liferay.dev/forums/-/message_boards/message/118355231

Hello, I have created 2 react portlets and adapted them to Liferay (7.2 ga1) with "yo liferay-js:adapt". Then I have added them in their respective pages. The 2 portlets shows ok. The first portlet is displayed, then when I click on the menu to go the second, the 2nd portlet is displayed correctly. The issue is when I click on the menu to get back to the first portlet, the first portlet is displayed just blank.However when I refresh the url, the portlet does show correctly.And nothing special in the log neither Liferay log, nor in the chrome log.Any idea please?

[izaera]

Disabling SPA at a portal level fixes the issue, however I have tried to disable it on a per portlet basis and that doesn't bypass the issue.

The problem is not with SPA itself, but with the way webpack bootstraps applications.

[izaera]

It happens with:

1. React
2. Angular

Doesn't fail with:

1. Vue (looks like it has something to do with having a single webpack bundle; others have three)

[izaera]

I''ve been able to fix it for React and Vue by simply triggering a full reload of all Javascript in the application.

Sadly, that doesn't work for Angular because zone.js complains when polyfilling Promise:

Error: "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)"

[izaera]

I have patched the method that throws the error in a desperate attempt to make things work, but it keeps failing for other reasons.

My diagnostic is that Angular cannot be bootstrapped more than once. In fact, it's very probable that it wants to be in its own window, with nothing else around or any other lib taking control of anything.

Given that the error happens when platformBrowserDynamic().bootstrapModule(AppModule) is called (which happens inside main.ts) and given that this invocation is what makes the application bootstrap, I really doubt that there's a solution for this...

[izaera]

Apparently, we should be able to bootstrap everything if we returned to the state where the browser was just before the first bootstrap (which definitely works) but given that Angular is polyfilling and overwriting things in window I'm not sure if that will be possible at all.

And even if it is, it may be too complex to make it stable enough in time.

[netmac]

For react, your fix "triggering a full reload of all Javascript in the application" isn't going to defeat the idea of having multiple react apps and being able to switch between them seamlessly? People usually react to take advantage of SPA, isn't' it?

[izaera]

@netmac Well, the situation is worse now because the portlet doesn't show.

Keep in mind that this problem only happens when you switch between pages (using the navigation menu) that have one portlet each, otherwise there doesn't seem to be any problem (or at least nobody has reported anything yet...).

I would say people usually use react to have one portlet in a single page acting as a SPA or several portlets in the same page (that is not unloaded while it is being used). Then, when the page is navigated away, all state in the client side is lost.

Can you think of any situation where reloading would break things more? 🤔

[izaera]

This will be fixed for React and Vue and left as a limitation for Angular.