When serving es5 ngx-socket-io gives me error

[JSmithOner]

🐞 bug report

Is this a regression?

From what I remember it didn't worked with angular 9 either

Description

.

I'm using an old IPad 2 for development and just upgraded to angular 10. I'm using ngx-socket-io but I'm trying to build the project using es5. I followed the guideline for building es5 from here

I notice that angular is using even in es5 the bundle fesm2015 of ngx-socket-io causing this unknown error.
When running ng serve it says compiling ngx-socket-io : es2015 as esm2015
I needed to use old safari in order to get the debugger working, so finding the precise error is kind of painful.
notice that basic app using ng new projectName is working on my ipad.

I use this command ng serve --aot --configuration es5 --host 192.168.XX.XX

this is my first GitHub Bug report please let me know if I'm doing wrong or at the wrong place

Thanks in advance

🔬 Minimal Reproduction

I wasn't able to reproduce it on stackBlitz but basically you only have to install ngx-socket-io import it on your new project and make ng serve with host value for safari 9
-->

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Safari 9
IOS 9.3.5
Angular 10.0.3

Anything else relevant?

[petebacondarwin]

It is normal for ngcc to process the ES2015 version of the library. The ES5 version of the application is created at the end of the build by downleveling the ES2015 version of the app. So the order of things is that your TS code is compiled by Angular/TypeScript, webpack bundles this with the imported 3rd party libraries into ES2015 formatted distributable files, these ES2015 files are downleveled to ES5.

Now I believe that your index.html should be setup to use the ES5 dist files on older browsers, and ES2015 otherwise.

Can you see if ES5 versions are being built if you run ng build --aot --configuration es5?

[JSmithOner]

@petebacondarwin
First of all thanks for your reply.
I think it's E5 version I also get polyfills-es5.jsand polyfills-es5.js.map builded
I'll test them on a server see if they display properly

[JSmithOner]

@petebacondarwin I get on a latest firefox on my mac (not ipad this time) this error

Uncaught TypeError: "exports" is read-only
    js common.js:266
    js vendor.js:52465
    Webpack 20
common.js:266
    js common.js:266
    js vendor.js:52465
    Webpack 20

after few problems I've managed to make it working back as es2015 on my mac the problem seems to be with es5 only

[petebacondarwin]

I wonder if there is some additional setup that is needed... Perhaps in the browserslist?

[JSmithOner]

@petebacondarwin adding safari 9 to the browserslist doesn't really change something. I'm stuck.
I've just added a more in depth look and it is bugging here (the webpack)

vendor.js

module.exports = setup;
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/harmony-module.js */ "./node_modules/webpack/buildin/harmony-module.js")(module)))

then

common.js

module.exports = setup;