Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
NG 8 IE 11 & Differential Loading #16653
@destus90 Thank you for your reply.
2- Yes I uploaded the same image twice
1- I see from your link on the angular site it does mention:
"Some legacy browsers still download both bundles, but only execute the appropriate scripts based on the attributes mentioned above."
That's a little disappointing, we just moved to Angular 8 and differential loading seemed to be one of the killer features, reading @StephenFluin blog post I was excited. The thing is that most of our users are running modern browsers, it's just IE11 that's the issue for corporate clients and I feel like this is where differential loading would shine. However it looks like for our clients this is the reality:
Could we not also just wrap the ES2015 bundle in something like:
I feel like this is a solvable problem for the whole Angular community, I also feel like IE11 should be the focus of differential loading as most of the other browsers are evergreen and can all use the 2015 feature set.
Still the biggest issue for me is that the es5 bundle (non differential loading works) but the es5 bundle (when differential loading is turned on) does not work. But they should be the same es5 bundle, it's just that we have a second bundle for modern browsers, right?
The most upvoted "How do I make Angular 8 compatible with IE11?" answer on stack overflow is to disable differential loading, but it should work with IE11 and differential loading, so I feel like others have this issue maybe I am just the first one to raise it.
Tried the attached demo project with
Downgrading to ...
This still leaves the bigger issue of both packages being downloaded on IE 11
Maybe we could use something like:
to prevent downloading both bundles in IE11.
The current method used for execution bifurcation was chosen after research into a variety of methods. There are indeed tradeoffs for some older browsers (IE in particular). However, as best explained in this comment from one of the Chrome team members, the real world affect of the double download is generally minimal to non-existent. This is in contrast to the effect of the method in the above comment (as well as others), which can have large performance issues for modern browsers especially on mobile platforms.
If the user base of a particular application is predominantly using IE, targeting ES5 may be the best option for the application. It is also possible to post process the generated index to alter the differential loading method if testing reveals non-ideal performance metrics for a given application's usage environment. Another option would be using a server generated index per request and opens up potential additional avenues regarding attempts at browser detection guided script selection.
@clydin thanks for the link. Web development = complexity!
Your argument about desktop vs mobile does make sense. For us, currently, I don't think we can choose almost a double initial bundle for IE and other older browsers to get faster performance in modern browsers, as our bundle is embarrassingly large
I feel like the marketing for this feature missed the mark a bit.
The statement "When users load your application, they’ll automatically get the bundle they need." from Version 8 of Angular — Smaller bundles, CLI APIs, and alignment with the ecosystem is not super accurate. As you pointed out it's really a compromise, and while modern browsers get better smaller bundles and parse performance older browsers initial bundle size is almost doubled, I know the docs do make a cursory reference to this but it might be worthwhile to make this tradeoff more prominent, for anyone else with embarrassingly large bundles, as I thought I could just drop this in and win!
I don't think we will be using this feature for the next couple of months until our initial bundle is not embarrassingly large (working on it), but we should still work to fix issues 2 and 3 for others