softsimon / ngx-bootstrap-multiselect

Angular 9+ Dropdown Multiselect Bootstrap
332 stars 198 forks source link

IE11 support when updating project from NG 7.2.2 to NG 9.1.12 #466

Open kylebradshaw opened 4 years ago

kylebradshaw commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

kylebradshaw commented 4 years ago

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 commented 4 years ago

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

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

kylebradshaw commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@kylebradshaw were you able to find a solution?

kylebradshaw commented 4 years ago

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 commented 4 years ago

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