search

ghiscoding / Angular-Slickgrid

Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
https://ghiscoding.github.io/Angular-Slickgrid
MIT License
393 stars 117 forks source link

angular 9 support #413

Closed asdman384 closed 4 years ago

asdman384 commented 4 years ago

I'm submitting a Bug report

Your Environment

Software Version(s)
Angular 9.0
Angular-Slickgrid 2.17
TypeScript 3.7

Describe the Bug

ng doesn't build with --prod param

Steps to Reproduce

  1. setup new angular 9 project
  2. install latest version of Angular-Slickgrid (2.17.10)
  3. perform ng build --prod

Expected Behavior

successful build

Current Behavior

errors:

ERROR in main-es2015.1b92951cf3237dd53a69.js from Terser
TypeError: e.contains_this is not a function
    at Qi (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:212427)
    at AST_Dot.flatten_object (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:220037)
    at C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:221078
    at AST_Dot.optimize (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:123881)
    at ni.before (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:123660)
    at AST_Dot.transform (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:79151)
    at C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:82445
    at ni.before (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:123632)
    at AST_ObjectKeyVal.transform (C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:79151)
    at C:\dev\angular\slickgrid\node_modules\terser\dist\bundle.min.js:1:79313

also I've got following warnings:

WARNING in Entry point 'angular-slickgrid' contains deep imports into 
'C:/dev/angular/slickgrid/node_modules/slickgrid/plugins/slick.cellrangedecorator', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/plugins/slick.cellrangeselector', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/plugins/slick.cellselectionmodel', 
'C:/dev/angular/slickgrid/node_modules/jquery-ui-dist/jquery-ui', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/lib/jquery.event.drag-2.3.0', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/lib/jquery.mousewheel', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/slick.core', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/slick.grid', 
'C:/dev/angular/slickgrid/node_modules/slickgrid/slick.dataview', 
'C:/dev/angular/slickgrid/node_modules/flatpickr/dist/types/locale'.
This is probably not a problem, but may cause the compilation of entry points to be out of order.

Possible Solution

not found

Code Sample

n\a

ghiscoding commented 4 years ago

that is seriously 1 big thing that I hate about Angular, nearly every major release they've done broke something in my lib. The warnings seem ok to me, that is how I import them here and that looks fine to me.

Your error doesn't tell me much to work with either e.contains_this is not a function, what is that??? Do you have necessary polyfill? With Angular 8, the problem we had was the build browser target was using ES2015 (shown in this other issue) instead of ES5 with Angular 6 and below, maybe try changing the target? I would look in the production build differences compare to an Angular 8 project, I know it's using Ivy now but still

I really have no time to look into this, I would hope someone from the community can find the issue.

asdman384 commented 4 years ago

switching target to es5 helps. But this is not a solution for me, I have to use es2015 for other features in my project

ghiscoding commented 4 years ago

When you say it helps, does it complete a prod build or not? For Angular 8 to work I had to fix a few things in the SlickGrid core itself and now Angular works with a target of ES2015.

asdman384 commented 4 years ago

yes, with target es5 I got successful prod build on angular 9

ghiscoding commented 4 years ago

What is the default that Angular 9 put? If it's higher than ES2015, then try that

asdman384 commented 4 years ago

Angular 9 puts ES2016 target and it produces the same error during prod build

ghiscoding commented 4 years ago

Just for reference in case anyone else comes in here.. the Temp Fix is to target es5

Unfortunately I have no time to look into this, it might be (most probably is) some code in the SlickGrid core library which I have no time at the moment to investigate. Please remember that SlickGrid was built 10 years ago in plain JavaScript + jQuery and probably has issues with targeting newer than ES6 (I had fixed some for Angular 8 to build with latest target and now surprise, more of that in Angular 9 sic)

I'd be really happy if someone can investigate the issue. Thank you

What could be helpful as well is if someone has time to update the Angular-Slickgrid-Demos to Angular 9

ghiscoding commented 4 years ago

@asdman384 So I took 30 minutes or so to update the Angular-Slickgrid-Demos to Angular 9 and ran a Prod build, I see no issues whatsoever. You can see the PR of all the files that got changed after the Angular 9 update (note that I only updated the demo not the lib itself which is still at ng7).

However I might know what your problem is, I remember that when I first started the HOWTO - Step by Step Wiki I mentioned to install a few packages via NPM and one of which was slickgrid itself but I later found that this was too restrictive since it was asking the user to manually take control of which version of slickgrid to install and most user would probably never update it.... and as I mentioned earlier, I made some changes for Angular 8 to work in the core SlickGrid lib and there's a big change that you're not using the correct version of the core lib and that would explain which you're getting parser errors. So basically what I meant to say is to just have angular-slickgrid in your package.json without slickgrid itself (it's a dependency of angular-slickgrid and will get installed automatically).

So long story short, I suggest you to delete your lock file (npm or yarn lock file), then delete your node_modules (or just node_modules/slickgrid) and re-install everything. You can also check which version of slickgrid is installed in your lock file, you should see this slickgrid@2.4.20 which is what Angular-Slickgrid dependency is now at. If that doesn't work then maybe try to clone the Angular-Slickgrid-Demos.

Maybe another thing to make sure to have is the comment @dynamic on of your NgModule as explained in the HOWTO NgModule

Here's what my Angular 9 prod build look like after running it (as you can see from the output, my tsconfig target is set to ES2015 and I have no errors.). I also update both GitHub page demo with this build and they look all fine. 

$ ng build --prod
Warning: Entry point 'angular-slickgrid' contains deep imports into 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/plugins/slick.cellrangedecorator', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/plugins/slick.cellrangeselector', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/plugins/slick.cellselectionmodel', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/jquery-ui-dist/jquery-ui', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/lib/jquery.event.drag-2.3.0', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/lib/jquery.mousewheel', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/slick.core', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/slick.grid', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/slickgrid/slick.dataview', 'C:/sourcecode/GitHub/angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/flatpickr/dist/types/locale'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {2} polyfills-es2015.ba3d1e971ebd9981919c.js (polyfills) 98.2 kB [initial] [rendered]
chunk {3} polyfills-es5.0949227e66ac26740f22.js (polyfills-es5) 191 kB [initial] [rendered]
chunk {0} runtime-es2015.f8b979f66300b1e53384.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.f8b979f66300b1e53384.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.1f23b68f318b86fca1c2.js (main) 2 MB [initial] [rendered]
chunk {1} main-es5.1f23b68f318b86fca1c2.js (main) 2.12 MB [initial] [rendered]
chunk {4} styles.a1ca30709615d61e0b5d.css (styles) 215 kB [initial] [rendered]
chunk {scripts} scripts.89b4d995629b8565b1c8.js (scripts) 400 kB [entry] [rendered]
Date: 2020-04-16T22:20:05.998Z - Hash: bce768dc457f33b8f1ef - Time: 25285ms
ghiscoding commented 4 years ago

closing since no feedback was provided and I cannot replicate after successfully upgrading the Angular-Slickgrid-Demos to Angular 9 in this PR