IE11 support when updating project from NG 7.2.2 to NG 9.1.12

[kylebradshaw]

It looks like this project is the current iteration of https://www.npmjs.com/package/angular-2-dropdown-multiselect (no active development) which was used in 7.2.2 - I was able to update to 8.2.x without a problem, cheers!

However, upgrading from 8.2.x to 9.1.12 is showing issues. I wanted to ask - should I swap out

"angular-2-dropdown-multiselect": "1.9.0", for
"ngx-bootrap-multiselect": "2.0.0" ?

the composition looks similar but was there any migration documentation or anything? just wondering if the API's are drastically different.

lmk, thanks! 🍻

[softsimon]

I went through and upgraded the whole library to support 9+ without changing any API that I remember.
The library is renamed and replaced to get rid of the "angular-2" tag..

So yes, you need to swap the import completely and then rename the component to:
<ngx-bootrap-multiselect ...

[kylebradshaw]

that is super awesome. thanks dude. I will make this change and double check

[kylebradshaw]

So after an update I did run into issues on my 9.1.12 project - here is the error log.

[error] Error: NGCC failed.
    at NgccProcessor.process (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@ngtools\webpack\src\ngcc_processor.js:76:19)
    at C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:579:31
    at SyncHook.eval [as call] (eval at create (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\tapable\lib\Hook.js:154:20)
    at Object.webpack [as webpackFactory] (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\webpack\lib\webpack.js:55:30)
    at createWebpack (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@angular-devkit\build-webpack\src\webpack\index.js:19:36)
    at Object.runWebpack (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@angular-devkit\build-webpack\src\webpack\index.js:33:12)
    at SwitchMapSubscriber.project (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@angular-devkit\build-angular\src\browser\index.js:130:32)
    at SwitchMapSubscriber._next (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\switchMap.js:49:27)
    at SwitchMapSubscriber.Subscriber.next (C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:66:18)
    at C:\Users\$USER\Development\RemoteLinkCloud\Abiomed.ImpellaConnect\ClientApp\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24

is this related to the peer dependency requirement of min 10.0.6? so 9.x+ is not currently supported?
https://github.com/softsimon/ngx-bootrap-multiselect/blob/41f1e032ce609336a4d047c478f3424bc77c1e1b/package.json#L15

[softsimon]

I haven't tried 9.x but I believe it should work.
That error message seems very general and is not pointing specifically to the library.

Could you try the suggested solutions here like

• Setting "enableIvy":false
• Erasing node_modules and run npm install again

https://stackoverflow.com/questions/61222467/angular-9-ngcc-fails-with-an-unhandled-exception

[kylebradshaw]

I went through and tried some things. The "enableIvy": false flag did let me compile successfully, but this particular project requires IE11 support and has i18n features, so some of that changed with Ivy which is detailed here if you don't compile https://angular.io/guide/ivy#opting-out-of-ivy-in-version-9 (so I would like to enable Ivy for this reason)

I created a base NG@9 app with only the ngx-bootrap-multiselect package installed. In case you want to see a live example. In tsconfig target: es5 is needed to support IE11 and that causes the compilation issue on build. Changing to target: es2015 compiles fine, but then again the IE support is required.

I wonder what changed from angular2-multiselect to the current iteration that would cause these issues. LMK if you are aware of a simple fix!

https://github.com/kylebradshaw/bootrap-multiselect

Thanks a ton.

[softsimon]

Ok, it seems the error is caused by compiling to es2015 which IE11 does not have.
And compiling to es5 cause the build error:
Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class

What changed in the updated component is probably dropping es5 support.
Did you see this article linked from the Stackoverflow post on this error?
https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

[softsimon]

@kylebradshaw were you able to find a solution?

[kylebradshaw]

Unfortunately I could never get the new library to compile to es5 so I had to rollback to angular2-multiselect for now. Still need to support ie11 on this project

[kylebradshaw]

Something to be aware of in lib maybe worth documenting In the readme?