Comments (13)
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>
from elements.
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.
from elements.
@edgarjoao when it happens, did you try in another browser or anonymous Page? It appears to be cached by the browser
from elements.
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?
from elements.
@edgarjoao I'll try to see.
@tomastrajan can you help?
from elements.
@tomastrajan also, is it possible to send the repo of your projects?
from elements.
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.
from elements.
@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.
from elements.
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?
from elements.
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!
from elements.
@edgarjoao probably yes, I can check it out if you push the projects to your repository.
from elements.
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
from elements.
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.
from elements.
Related Issues (20)
- Not able to refresh/reload angular element using axLazyElement through Angular Proxy
- Using custom element inside ng-template of another custom element throws an error
- url not exist
- Request for shadow-root support
- How do i load <ax-lazy-element> dynamically using Angular dynamic component loader? HOT 1
- React version of axLazyElement
- The `isModule` property of a `ElementConfig` is ignored.
- Does v13.0.0 of this package support Angular 14? HOT 1
- How to merge source map files HOT 1
- QUESTION: Why is Intersection Observer and requestIdleCallback not used?
- Angular 15 migrations - inject() HOT 3
- Angular 15 migrations - deprecated entities HOT 2
- Angular 15 migrations - standalone components / directives / router / ...
- How to communicate the element ? HOT 1
- lazy elements module keep loading the MFE in an infinite loop. HOT 1
- Bearer-token not propagated when resolving a web component from a different host
- HMR in Microfront
- Reload Component
- property binding to web component doesn't work as expected
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from elements.