I did global installation of npm handsontable . Imported in angular module . However compilation on ng serve gives error of gpu.js module not found. I tried installing gpu.js but it failed with proxy error. What is the workaround ? I am using angular 9.
Handsontable not compiled with angular js 9 version
Hi Aleksandra,
Please see the package.json as below :-
{
“version”: “1.0.0”,
“scripts”: {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
“private”: true,
“dependencies”: {
"@angular/animations": "~9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.11",
"@angular/localize": "~9.1.11",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.11",
"@angular/platform-browser-dynamic": "~9.1.11",
"@angular/router": "~9.1.11",
"@fortawesome/fontawesome-free": "^5.15.3",
"@handsontable/angular": "^9.0.2",
"@ng-bootstrap/ng-bootstrap": "^6.2.0",
"bootstrap": "^4.4.0",
"handsontable": "^9.0.2",
"highcharts": "^9.1.2",
"jquery": "^3.6.0",
"jsonwebtoken": "^8.5.1",
"mat-table-exporter": "^10.2.3",
"ngx-logger": "^4.2.2",
"ngx-pagination": "^5.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.14.1",
"zone.js": "~0.10.2"
},
“devDependencies”: {
"@angular-devkit/build-angular": "~0.901.9",
"@angular/cli": "^9.1.15",
"@angular/compiler-cli": "~9.1.11",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
gpu error as -
ng serve --port 80
10% building 3/3 modules 0 active(node:26708) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
chunk {main} main.js, main.js.map (main) 2.12 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 799 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 158 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 346 kB [initial] [rendered]
Date: 2021-09-09T11:51:45.374Z - Hash: e58ece095668c0744872 - Time: 31824ms
ERROR in node_modules/hyperformula/typings/interpreter/Interpreter.d.ts:19:26 - error TS2307: Cannot find module ‘gpu.js’.
19 import type { GPU } from ‘gpu.js’;
~~~~~~~~
node_modules/hyperformula/typings/Config.d.ts:13:26 - error TS2307: Cannot find module ‘gpu.js’.
13 import type { GPU } from ‘gpu.js’;
~~~~~~~~
and when i try to install gpu.js , i get below error
npm ERR! code 1
npm ERR! path C:\Users\db91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\gl
npm ERR! command failed
npm ERR! command C:\windows\system32\cmd.exe /d /s /c prebuild-install || node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@12.22.1 | win32 | x64
npm ERR! gyp info find Python using Python version 3.6.8 found at “C:\Program Files\Python36\python.exe”
npm ERR! gyp http GET https://nodejs.org/download/release/v12.22.1/node-v12.22.1-headers.tar.gz
npm ERR! gyp WARN install got an error, rolling back install
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: This is most likely not a problem with node-gyp or the package itself and
npm ERR! gyp ERR! stack is related to network connectivity. In most cases you are behind a proxy or have bad
npm ERR! gyp ERR! stack network settings.
npm ERR! gyp ERR! stack at Request. (C:\Users\DB91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\node-gyp\lib\install.js:170:21)
npm ERR! gyp ERR! stack at Request.emit (events.js:314:20)
npm ERR! gyp ERR! stack at Request.onRequestError (C:\Users\DB91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\request\request.js:877:8)
npm ERR! gyp ERR! stack at ClientRequest.emit (events.js:314:20)
npm ERR! gyp ERR! stack at TLSSocket.socketErrorListener (_http_client.js:427:9)
npm ERR! gyp ERR! stack at TLSSocket.emit (events.js:314:20)
npm ERR! gyp ERR! stack at emitErrorNT (internal/streams/destroy.js:92:8)
npm ERR! gyp ERR! stack at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
npm ERR! gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:84:21)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! command “C:\Program Files\nodejs\node.exe” “C:\Users\DB91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\node-gyp\bin\node-gyp.js” “rebuild”
npm ERR! gyp ERR! cwd C:\Users\db91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\gl
npm ERR! gyp ERR! node -v v12.22.1
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
Please see the package.json as below :-
{
“version”: “1.0.0”,
“scripts”: {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
“private”: true,
“dependencies”: {
"@angular/animations": "~9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.11",
"@angular/localize": "~9.1.11",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.11",
"@angular/platform-browser-dynamic": "~9.1.11",
"@angular/router": "~9.1.11",
"@fortawesome/fontawesome-free": "^5.15.3",
"@handsontable/angular": "^9.0.2",
"@ng-bootstrap/ng-bootstrap": "^6.2.0",
"bootstrap": "^4.4.0",
"handsontable": "^9.0.2",
"highcharts": "^9.1.2",
"jquery": "^3.6.0",
"jsonwebtoken": "^8.5.1",
"mat-table-exporter": "^10.2.3",
"ngx-logger": "^4.2.2",
"ngx-pagination": "^5.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.14.1",
"zone.js": "~0.10.2"
},
“devDependencies”: {
"@angular-devkit/build-angular": "~0.901.9",
"@angular/cli": "^9.1.15",
"@angular/compiler-cli": "~9.1.11",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
gpu error as -
ng serve --port 80
10% building 3/3 modules 0 active(node:26708) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
chunk {main} main.js, main.js.map (main) 2.12 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 799 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 158 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 346 kB [initial] [rendered]
Date: 2021-09-09T11:51:45.374Z - Hash: e58ece095668c0744872 - Time: 31824ms
ERROR in node_modules/hyperformula/typings/interpreter/Interpreter.d.ts:19:26 - error TS2307: Cannot find module ‘gpu.js’.
19 import type { GPU } from ‘gpu.js’;
node_modules/hyperformula/typings/Config.d.ts:13:26 - error TS2307: Cannot find module ‘gpu.js’.
13 import type { GPU } from ‘gpu.js’;
and when i try to install gpu.js , i get below error
npm ERR! code 1
npm ERR! path C:\Users\db91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\gl
npm ERR! command failed
npm ERR! command C:\windows\system32\cmd.exe /d /s /c prebuild-install || node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@12.22.1 | win32 | x64
npm ERR! gyp info find Python using Python version 3.6.8 found at “C:\Program Files\Python36\python.exe”
npm ERR! gyp http GET https://nodejs.org/download/release/v12.22.1/node-v12.22.1-headers.tar.gz
npm ERR! gyp WARN install got an error, rolling back install
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: This is most likely not a problem with node-gyp or the package itself and
npm ERR! gyp ERR! stack is related to network connectivity. In most cases you are behind a proxy or have bad
npm ERR! gyp ERR! stack network settings.
npm ERR! gyp ERR! stack at Request. (C:\Users\DB91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\node-gyp\lib\install.js:170:21)
npm ERR! gyp ERR! stack at Request.emit (events.js:314:20)
npm ERR! gyp ERR! stack at Request.onRequestError (C:\Users\DB91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\request\request.js:877:8)
npm ERR! gyp ERR! stack at ClientRequest.emit (events.js:314:20)
npm ERR! gyp ERR! stack at TLSSocket.socketErrorListener (_http_client.js:427:9)
npm ERR! gyp ERR! stack at TLSSocket.emit (events.js:314:20)
npm ERR! gyp ERR! stack at emitErrorNT (internal/streams/destroy.js:92:8)
npm ERR! gyp ERR! stack at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
npm ERR! gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:84:21)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! command “C:\Program Files\nodejs\node.exe” “C:\Users\DB91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\node-gyp\bin\node-gyp.js” “rebuild”
npm ERR! gyp ERR! cwd C:\Users\db91585\AppData\Roaming\npm\node_modules\gpu.js\node_modules\gl
npm ERR! gyp ERR! node -v v12.22.1
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
Reply
Bookmark
Hi @dipti1708
Thank you for sharing the details. I found the same issue reported here https://github.com/handsontable/handsontable/issues/8358
Where it is confirmed that these messages in an error. But it is working well after installing the gpu.js library. I do not see it in your package file.
Please install gpu.js and try to build the application again.
ps. If you are just starting with Handsontable and do not need the fix for now you can also use the v8.4.0 of Handsontable until we fix this issue internally.
displaying message that license is required else this footer would show?
The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: ‘non-commercial-and-evaluation’. Read more about it in the documentation or contact us at support@handsontable.com.
displaying message that license is required else this footer would show?
The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: ‘non-commercial-and-evaluation’. Read more about it in the documentation or contact us at support@handsontable.com.
Hi @dipti1708
How have you defined the licenseKey?
As described under the given link, you have two options.
But no matter which approach you take, you need to set the key on the initialization of the table.
If that won’t work, please contact me at support@handsontable.com
I already emailed at support@handsontable.com. My ticket is 26988. It works with free license but i want to know limitations of it and whats the cost of Saas license or other different types of licenses.
Thank you @dipti1708
I have asked our Sales Team to provide you with a detailed answer. You should receive their email at the latest tomorrow.
Our Angular wrapper for Handsontable in v6.0.1 (before introducing the mono repository) supported Angular 8+ and Handsontable 8+.
Angular wrapper for Handsontable v2.0.0 might work with Handsontable 6.2.2. But those versions were published in December 2018 and since then the versions of web browsers also upgrade with a couple of “numbers” so you have to take that under consideration.
Here https://we.tl/t-D4q8WctZjx is a zipped version of Handsontable for Angular v2 and below are resources for Handsontable Community Edition (free to use) v6.2.2
https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.css
https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.js
you mean handsontable 6.0.1 will be supported by angular 9?
which is the angular wrapper - @handsontable/angular? Should i use handsontable-pro @6.0.1 or @handsontable/angular 6.0.1? Do you have any reference project for angular 9 with handsontable 6.0.1?
I am getting grid setting error while using @handsontable/angular@6.0.1 and handsontable@6.0.1 . I even tried handsontabl-pro but all give below errors with angular 9 -
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:37:26 - error TS2694: Namespace ‘Handsontable’ has no exported member ‘ColumnSettings’.
37 strict: Handsontable.ColumnSettings['strict'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:38:25 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
38 title: Handsontable.ColumnSettings['title'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:39:32 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
39 trimDropdown: Handsontable.ColumnSettings['trimDropdown'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:40:24 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
40 type: Handsontable.ColumnSettings['type'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:41:37 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
41 uncheckedTemplate: Handsontable.ColumnSettings['uncheckedTemplate'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:42:29 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
42 validator: Handsontable.ColumnSettings['validator'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:43:31 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
43 visibleRows: Handsontable.ColumnSettings['visibleRows'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:44:25 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
44 width: Handsontable.ColumnSettings['width'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-column.component.d.ts:45:28 - error TS2694: Namespace 'Handsontable' has no exported member 'ColumnSettings'.
45 wordWrap: Handsontable.ColumnSettings['wordWrap'];
~~~~~~~~~~~~~~
node_modules/@handsontable/angular/lib/hot-table.component.d.ts:67:41 - error TS2339: Property 'formulas' does not exist on type 'GridSettings'.
67 formulas: Handsontable.GridSettings['formulas'];
~~~~~~~~~~If you use my resources for Handsontable v6.2.2 / Angular for Handsontable (the wrapper) v2.0.0 and you want to work on the MIT version (for free) you need to use @handsontable/angular not the -pro version as it is a commercially licensed product.
Handsontable for Angular v6.0.1 was introduced nearly 2 years after Handsontable v6.2.2 that is why I suggested using Handsontable for Angular v2.0.0 (the one zipped in my comment above)
so it means @handsontable/angular 6.0.1 will not work with angular 9?
In our company we have npm angular-handsontable below versions:-
npm show angular-handsontable versions
‘0.0.2’, ‘1.0.0-beta1’, ‘1.0.0-beta2’, ‘1.0.0-beta3’, ‘1.0.0-beta4’.
Which one to use from these as we cant use downloaded zip in our org. And the package,json of your zip file shows handsontable 4.0.0
Here is the direct link to npm https://www.npmjs.com/package/@handsontable/angular/v/2.0.0
If you want to use NPM, then the command is
npm i @handsontable/angular@2.0.0