Comments (6)
Hi @gs-smuthyam ! So differential build produces multiple JavaScript bundles right ? So out of the box you have to provide url for your element so you will point only to a single bundle. You could try to point to both and use module: true
for the modern one.
Don't remember what is the exact exclusive <script>
tag syntax to execute only one and not the other based on browser feature support.
If current state of things is not enough additional flag could be added.
from elements.
Hi @tomastrajan
Thank you for the reply, will try adding both as you mentioned and update here. But the code appears to be loading them independently as I can see in the code
from elements.
@gs-smuthyam yes, but that also how angular differential loading works, right? It adds two sets of script tags to index.html and only one set gets executed based on browser feature support.
The only question that remains is if the lib constructs mutually exclusive script tags for module: true
vs false
currently and if not, what is still missing and should be added (will be enabled with additional flag, eg differential: true
).
from elements.
Hi @tomastrajan,
Yeah the build constructs main-es15.js
& main-es2015.js
and in browser the script tags would be
<script src="main-es2015.js" type="module"></script>
<script src="main-es5.js" nomodule></script>
So below are possible options to choose
-
Accept a collection of scripts (JSON)
<stcript, module/nomodule>[]
-
Based on the new flag (
differential: true
), identify the browser & intelligently rename the script file and load only that. Personally, I would not prefer this approach since this will make things dependent on the library.
Currently to solve our product flow, we are going ahead with this approach as a workaround. Check the browser type and load the appropriate script file.
from elements.
Hi @gs-smuthyam !
So currently the "problem" is that lib does NOT use nomodule
for module: false
(which is default) so if two urls are used then both elements will be loaded.
How about this?
<my-element *axLazyElement="url-es5.js; nomodule: true"></my-element>
<my-element *axLazyElement="url-es2015.js; module: true"></my-element>
That way it's fully explicit and can be documented as a technique to use differential loading?
from elements.
Hi @tomastrajan,
We can try out this. If we can make this work, this would be awesome. Indirectly it is same as the one proposed in previous comment ( being able to load multiple script files which user mentioned )
However, I'm afraid, this might not work especially imagine we are dealing with a dashboard where you have number of widgets in place and each of them are identified with unique #id
. The moment we add two lazyElements
the lib code would try to identify the tag with unique name and will find ambiguity.
I have tried with using multiple elements as you mentioned in modern browser, however ran into tag / unique name ambiguities. So ended up with evaluating and keeping only one axLazyElement
by evaluating the browser for the time being.
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
- axLazyElement not able to identify whether remote element is stopped or running HOT 13
- 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.