lgdd/lfr-angular-remote-app

Bug when we refresh the page

ericdariel opened this issue · 4 comments

Hello Louis-Guillaume,

I try your wonderfull Angular 14 RemoteApp and it works well.

I deploy it with a ng serve on port 4200 and create my remoteApp in Liferay 7.4 GA38.
I have to add many URLs do to my RemoteApp :

URL: http://localhost:4200/runtime.js
URL: http://localhost:4200/polyfills.js
URL: http://localhost:4200/vendor.js
URL: http://localhost:4200/main.js
URL http://localhost:4200/styles.js
CSS URL: http://localhost:4200/styles.css

And I do not check the option "Use ES Modules".

After that, when I go on my page the RemoteApp portlet is OK.
But if I refresh it, it fails and if I go to the page with the URL and not with the menu it fails.

After that, if I try to check the option "Use ES Modules".
The reverse happens !

If I go with the menu, it fails but if I load the page or do a refresh it works !
So I try to desactivate SPA on this page by adding '<a href="/my-page" data-senna-off="true" '> in the link of the menu... it works !!!

Do you have this problem too ? Is it a problem with the 7.4 GA38 version or with the Angular portlet ???
Last week I was on a older version (GA34) and I do not remember having this problem with your RemoteApp portlet !

Eric.

I have just try with a vanilla 7.4 GA34 and it works well !
After I have try with a vanilla 7.4 GA38 and it fails !

I think it is a new problem with GA38 version... I will report this on https://issues.liferay.com/

lgdd commented

Hey @ericdariel! Thanks for reporting this! I'll closely follow this up.

This issue can be closed.

We find a solution with the usage of "@angular/elements" :

  ngDoBootstrap() {
	const AppComponentElement = createCustomElement(AppComponent, {
		injector: this.injector,
	});

	customElements.define(
		'lfr-angular-remote-app',
		AppComponentElement
	);
}