One side experiment of my Angular adventure was to test the backwards compatibility claims for the framework. By default, Angular does not build support for older browsers, but it could be configured to do so. Looking through the referenced
browserlist project, I see an option of “ie_mob” for Microsoft Internet Explorer on “Other Mobile” devices a.k.a. the stock web browser for Windows Phone.
ie_mob 11 to the list of browser targets in an Angular project. This backwards compatibility mode is not handled by the Angular development server (
ng serve) so I had to run a full build (
ng build) and spin up an nginx container to serve the entire
/dist project subdirectory.
Well now, it appeared to work! Or at least, more of this test app showed up on screen than if I hadn’t listed ie_mob on the list of browser targets.
However, scrolling down unveiled some problems with elements that did not get rendered, below the “Next Steps” section. Examing the generated HTML, it didn’t look very different from the rest of the page. However, these elements did use different CSS rules not used by the rest of the page.
Hypothesis: The HTML is fine, the TypeScript has been transpiled to Windows Phone friendly dialects, but the page used CSS rules that were not supported by Windows Phone. Lacking CSS knowledge, that’s where my investigation had to stop. Microsoft has long since removed debugging tools for Windows Phone so I couldn’t diagnose it further except by code review or trial and error.
Another interesting observation on this backwards-compatible build is
vendor-es2015.js (2,202,719 bytes). While a few megabytes are fairly trivial for modern computers, this combination of the two would not fit in the 4MB flash on an ESP32.
Initial Chunk Files | Names | Size vendor-es5.js | vendor | 2.56 MB vendor-es2015.js | vendor | 2.10 MB polyfills-es5.js | polyfills-es5 | 632.14 kB polyfills-es2015.js | polyfills | 128.75 kB main-es5.js | main | 57.17 kB main-es2015.js | main | 53.70 kB runtime-es2015.js | runtime | 6.16 kB runtime-es5.js | runtime | 6.16 kB styles.css | styles | 116 bytes | Initial ES5 Total | 3.23 MB | Initial ES2015 Total | 2.28 MB
For such limited scenarios, we have to run the production build. After doing so (
ng build --prod) we see much smaller file sizes:
node ➜ /workspaces/pie11/pie11test (master ✗) $ ng build --prod ✔ Browser application bundle generation complete. ✔ ES5 bundle generation complete. ✔ Copying assets complete. ✔ Index html generation complete. Initial Chunk Files | Names | Size main-es5.19cb3571e14c54f33bbf.js | main | 152.89 kB main-es2015.19cb3571e14c54f33bbf.js | main | 134.28 kB polyfills-es5.ea28eaaa5a4162f498ba.js | polyfills-es5 | 131.97 kB polyfills-es2015.1ca0a42e128600892efa.js | polyfills | 36.11 kB runtime-es2015.a4dadbc03350107420a4.js | runtime | 1.45 kB runtime-es5.a4dadbc03350107420a4.js | runtime | 1.45 kB styles.163db93c04f59a1ed41f.css | styles | 0 bytes | Initial ES5 Total | 286.31 kB | Initial ES2015 Total | 171.84 kB