axLazyElement not able to identify whether remote element is stopped or running #148

Activity

1. edgarjoao

   changed the title [-]axLazyElement not able to identify if the remote element is stop or running[/-] [+]axLazyElement not able to identify whether remote element is stop or running[/+] on May 18, 2023
2. DanielBou99 commented on Jun 10, 2023

   

   DanielBou99

   on Jun 10, 2023

   Contributor

   More actions

   Hi @edgarjoao did you try to use ng-template like this?

   <ng-template #error>Loading failed...</ng-template>
   <mwc-button *axLazyElement="url; errorTemplate: error; module: true">
     Submit
   </mwc-button>
   
3. edgarjoao commented on Jun 10, 2023

   

   edgarjoao

   on Jun 10, 2023

   Author

   More actions

   Hi @DanielBou99,
   Adding tag is working just once, but if you stop the web server where your MFE is running, the ng-template does not catch that.
4. DanielBou99 commented on Jun 10, 2023

   

   DanielBou99

   on Jun 10, 2023

   Contributor

   More actions

   @edgarjoao when it happens, did you try in another browser or anonymous Page? It appears to be cached by the browser
5. edgarjoao commented on Jun 10, 2023

   

   edgarjoao

   on Jun 10, 2023

   Last edited by edgarjoao

   Author

   More actions

   Hi @DanielBou99 this is happened in any browser.

   This is my Shell Driver app.
   The shell app is running in port 4200 and my MFE is running in port 4202, Im using angular proxy.
   
   As soon I kill the MFE process Im expecting the axLazyElement tag library identify it and then remove the MFE from the shell app. At this moment the MFE is not running and the shell still have it cached in their side.

   The only way to identify whether a MFE is running or not, it’s reloading the page, but this is not good for SPA.
   

   Is there a way that axLazyElement library to not cache the MFE and listen when is not running?
6. DanielBou99 commented on Jun 10, 2023

   

   DanielBou99

   on Jun 10, 2023

   Contributor

   More actions

   @edgarjoao I'll try to see.
   @tomastrajan can you help?
7. DanielBou99 commented on Jun 10, 2023

   

   DanielBou99

   on Jun 10, 2023

   Contributor

   More actions

   @tomastrajan also, is it possible to send the repo of your projects?
8. DanielBou99 commented on Jun 11, 2023

   

   DanielBou99

   on Jun 11, 2023

   Last edited by DanielBou99

   Contributor

   More actions

   After several tests, I finally found the problem.
   Apparently when the elements extension service send the first HTTP request to get the micro front-end code, the browser saves this response.
   After that, for the next requests, the browser automatically returns the response it saved from the first request.
   For this reason, the main project is not detecting changes in the front-end micro because browser it's caching the first result.

   I believe the solution is to somehow force the browser to make the request again, I am studying a way to do this.

   
9. DanielBou99 commented on Jun 11, 2023

   

   DanielBou99

   on Jun 11, 2023

   Last edited by DanielBou99

   Contributor

   More actions

   @edgarjoao I just solved the issue!

   Solution:
   I was running the micro frontend server with the command npx http-server witch by default send in the header cache-control 3600 (seconds).
   To solve this problem, I just run the command like this npx http-server -p 4444 -c-1 to disable caching.
   Probably your issue is the same, check if this is happen.
10. edgarjoao commented on Jun 11, 2023

    

    edgarjoao

    on Jun 11, 2023

    Author

    More actions

    Hi @DanielBou99
    Make sense, in some way the shell/driver app is caching the request to the MFE.
    At the end of the day the shell and MFE's would be deployed in a Web Server (http-server, apache, nginx, etc) where we can disable the option to cache.

    I'm using ng serve to run the MFE and driver app, is there a way to disable the cache there?
11. tomastrajan commented on Jun 11, 2023

    

    tomastrajan

    on Jun 11, 2023

    Member

    More actions

    In general it works the best to use E-tags when serving element (webcomponents) bubdles.

    Url will always stay the same(no hash in filename), FE will make a preflight request to BE to figure out if content of the bundle changed since last request.

    Hope that helps!
12. DanielBou99 commented on Jun 11, 2023

    

    DanielBou99

    on Jun 11, 2023

    Contributor

    More actions

    @edgarjoao probably yes, I can check it out if you push the projects to your repository.
13. edgarjoao commented on Jun 12, 2023

    

    edgarjoao

    on Jun 12, 2023

    Last edited by edgarjoao

    Author

    More actions

    Hi @DanielBou99 and @tomastrajan,
    Taking a look in the code, I can see a line where the script is appended to to document.body in case everything is good.
    https://github.com/angular-extensions/elements/blob/master/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts#L169

    I think a remove element would be an option in case an error trying to load the javascript.
    Adding this remove element in cleanup function.
    https://github.com/angular-extensions/elements/blob/master/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts#L157
14. DanielBou99 commented on Jun 12, 2023

    

    DanielBou99

    on Jun 12, 2023

    Contributor

    More actions

    Hi @DanielBou99, Taking a look in the code, I can see a line where the script is appended to to document.body in case everything is good. https://github.com/angular-extensions/elements/blob/master/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts#L169

    I think a remove element would be an option in case an error trying to load the javascript. Adding this remove element in cleanup function. https://github.com/angular-extensions/elements/blob/master/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts#L157

    I understand but it would be necessary to reproduce your error to understand what is happening because in my project I managed to solve it.
15. edgarjoao

    changed the title [-]axLazyElement not able to identify whether remote element is stop or running[/-] [+]axLazyElement not able to identify whether remote element is stopped or running[/+] on Jun 12, 2023