Facing issue with integrating handsontable with angular 2.4

Tags: #<Tag:0x00007f8b25d5a248>

Hi Alex,
i integrated handsontable features earlier and it worked that time but when i am trying to integrate it now its not working after installing it.
following steps are used :
install using below command:
npm i ng2-handsontable --save

after installing: in module file i am writing this
import { HotTableModule } from ‘ng2-handsontable’;
imports: [

HotTableModule,

],

the time i am wrting HotTableModule , application is getting hanged on that page and not getting any error also in console.
Quick help would be appreciated.
Thanks

Sorry, I cannot help. The https://www.npmjs.com/package/ng2-handsontable is not our project. Our official Angular 2+ wrapper is https://github.com/handsontable/angular-handsontable

used this command to install handsontable:
npm install handsontable @handsontable/angular

getting this error when i am trying to compile
/webapp/node_modules/@handsontable/angular/handsontable-angular.d.ts, found version 4, expected 3, resolving sy
mbol TransactionModule in C:/Users/rr50008/workspaceeXCEL/Webbb/webapp/src/app/aip/cdt/transaction/transaction.module.ts,

i am importing in my module file:
import { HotTableModule } from ‘@handsontable/angular’;
imports: [

HotTableModule.forRoot()

],

my package.json

{
“name”: “portal-app”,
“version”: “0.0.0”,
“license”: “MIT”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve --host 0.0.0.0 --port 8888”,
“build”: “ng build --env=prod”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/common”: “^2.4.0”,
@angular/compiler”: “^2.4.0”,
@angular/core”: “^2.4.0”,
@angular/forms”: “^2.4.0”,
@angular/http”: “^2.4.0”,
@angular/platform-browser”: “^2.4.0”,
@angular/platform-browser-dynamic”: “^2.4.0”,
@angular/router”: “^3.4.0”,
"@handsontable/angular": “^2.0.0”,
@types/file-saver”: “^1.3.0”,
“ag-grid”: “^9.0.0”,
“ag-grid-angular”: “^9.0.0”,
“angular2-elastic”: “^0.13.0”,
“angular2-highcharts”: “^0.5.5”,
“chart.js”: “^2.5.0”,
“classlist.js”: “^1.1.20150312”,
“cookie-parser”: “^1.4.3”,
“core-js”: “^2.4.1”,
“file-saver”: “^1.3.3”,
"handsontable": “^4.0.0”,
“jquery”: “^3.2.1”,
“ng2-socket-io”: “^0.1.7”,
“node-static”: “^0.7.9”,
“primeng”: “^2.0.5”,
“quill”: “^1.3.4”,
“rxjs”: “^5.1.0”,
socket.io”: “^2.0.3”,
“web-animations-js”: “^2.2.2”,
“zone.js”: “^0.7.6”
},
“devDependencies”: {
@angular/cli”: “1.0.0-rc.0”,
@angular/compiler-cli”: “^2.4.0”,
@types/elasticsearch”: “^5.0.13”,
@types/jasmine”: “2.5.38”,
@types/node”: “~6.0.60”,
“body-parser”: “^1.17.1”,
“codelyzer”: “~2.0.0”,
“elasticsearch”: “^13.0.0”,
“express”: “^4.15.2”,
“jasmine-core”: “~2.5.2”,
“jasmine-spec-reporter”: “~3.2.0”,
“karma”: “~1.4.1”,
“karma-chrome-launcher”: “~2.0.0”,
“karma-cli”: “~1.0.1”,
“karma-coverage-istanbul-reporter”: “^0.2.0”,
“karma-jasmine”: “~1.1.0”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“nodemon”: “^1.11.0”,
“protractor”: “~5.1.0”,
“ts-node”: “~2.0.0”,
“tslint”: “~4.4.2”,
“typescript”: “~2.0.0”
}
}

i am using with angular 2.4…Please help

any help would be appreciated!!

Hi @rizwanullah.rizwi

here is a description for the same issue https://github.com/handsontable/angular-handsontable/issues/75

as @swistach wrote there

@handsontable/angular@1.0.0-beta4 is not compatible with @angular/core@^4.0.0.
If you want to use this version of the wrapper, then you have to upgrade @angular/core version to ^5.0.0

hi alex,
which version of handsontable is compatible with @angular/core@&^2.4.0 ad how to install it.
if you can provide the extact command to install handsontable version compatible with “@angular/core”: “^2.4.0”,…it would be helpful.

Thanks,
rizwan

Hi @rizwanullah.rizwi
You can use:

npm i angular-handsontable

npm should install either wrapper and library. Handsontable is there added as dependency and is frozen on v0.34.4 (https://cdn.jsdelivr.net/npm/angular-handsontable@1.0.0-beta4/package.json)

angular-handsontable supports @angular/core: ^2.4.7 || ^4.0.0 and handsontable: 0.34.4

Thanks switach for prompt reply,

i used thecomand you menioned to install:

npm i angular-handsontable;

then in my module file imported
import { HotTableModule } from ‘angular-handsontable’;
and then in imports:

imports: [
HotTableModule.forRoot()
]

after dong this much , i builded my applicatio and when i am trying to run that component where i imported handsontable module, page is crashing on console i am not getting any error as well.

my package.json file
{
“_from”: “angular-handsontable”,
“_id”: “angular-handsontable@1.0.0-beta4”,
“_inBundle”: false,
“_integrity”: “sha512-pBghm0ysgoyvKjJMZzakjHDl2qz6l1AL5a82PRyO5/2TLKpraKP3D5raUinXGuh6WttxHOJglZSW4VddV/IsSA==”,
“_location”: “/angular-handsontable”,
“_phantomChildren”: {},
“_requested”: {
“type”: “tag”,
“registry”: true,
“raw”: “angular-handsontable”,
“name”: “angular-handsontable”,
“escapedName”: “angular-handsontable”,
“rawSpec”: “”,
“saveSpec”: null,
“fetchSpec”: “latest”
},
“_requiredBy”: [
#USER”,
“/”
],
“_resolved”: “https://registry.npmjs.org/angular-handsontable/-/angular-handsontable-1.0.0-beta4.tgz”,
“_shasum”: “848d4a54957285112f7537eb090fe3ea16beffa6”,
“_spec”: “angular-handsontable”,
“_where”: …\webapp",
“author”: {
“name”: “Handsoncode”,
“email”: "hello@handsontable.com"
},
“browser”: “bundles/index.umd.js”,
“bugs”: {
“url”: “https://github.com/handsontable/angular-handsontable/issues
},
“bundleDependencies”: false,
“dependencies”: {
“handsontable”: “0.34.4”
},
“deprecated”: “Handsontable for Angular is now available as @handsontable/angular.”,
“description”: “Official Angular 2 directive for Handsontable”,
“devDependencies”: {
@angular/common”: “~4.2.0”,
@angular/compiler”: “~4.2.0”,
@angular/compiler-cli”: “~4.2.0”,
@angular/core”: “~4.2.0”,
@angular/forms”: “~4.2.0”,
@angular/http”: “~4.2.0”,
@angular/platform-browser”: “~4.2.0”,
@angular/platform-browser-dynamic”: “~4.2.0”,
@angular/router”: “~4.2.0”,
@types/jasmine”: “2.5.36”,
@types/node”: “^6.0.45”,
“angular2-template-loader”: “^0.6.0”,
“awesome-typescript-loader”: “^3.2.2”,
“core-js”: “^2.4.1”,
“cross-env”: “^5.0.1”,
“extract-text-webpack-plugin”: “3.0.0”,
“file-loader”: “^0.9.0”,
“generate-release”: “^0.13.1”,
“html-loader”: “^0.4.3”,
“html-webpack-plugin”: “^2.16.1”,
“jasmine-core”: “^2.4.1”,
“karma”: “^1.2.0”,
“karma-chrome-launcher”: “^2.0.0”,
“karma-coverage-istanbul-reporter”: “^1.3.0”,
“karma-firefox-launcher”: “^1.0.1”,
“karma-jasmine”: “^1.0.2”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“karma-sourcemap-loader”: “^0.3.7”,
“karma-webpack”: “^2.0.1”,
“null-loader”: “^0.1.1”,
“raw-loader”: “^0.5.1”,
“rimraf”: “^2.5.2”,
“rxjs”: “^5.4.2”,
“typescript”: “^2.4.2”,
“webpack”: “^2.6.1”,
“zone.js”: “0.8.12”
},
“homepage”: “https://github.com/handsontable/angular-handsontable#readme”,
“js:next”: “dist/index.js”,
“keywords”: [
“angular”,
“angular2”,
“angular4”,
“handsontable”,
“table”,
“spreadsheet”,
“datatable”,
“data”
],
“license”: “MIT”,
“main”: “index.ts”,
“module”: “dist/index.js”,
“name”: “angular-handsontable”,
“peerDependencies”: {
@angular/core”: “^2.4.7 || ^4.0.0”
},
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/handsontable/angular-handsontable.git”
},
“scripts”: {
“build”: “npm run build:bundles && npm run build:dist”,
“build:bundles”: “npm run clean:bundles && cross-env NODE_ENV=production webpack”,
“build:dist”: “npm run clean:dist && ngc -p ./tsconfig.json”,
“clean”: “npm run clean:dist && npm run clean:bundles”,
“clean:bundles”: “rimraf bundles”,
“clean:dist”: “rimraf dist”,
“prepublish”: “npm run clean && npm run build”,
“release”: “generate-release”,
“test”: “npm run build && karma start”,
“test:watch”: “tsc && karma start --no-single-run --auto-watch”,
“watch”: “cross-env NODE_ENV=watch webpack --watch”
},
“typings”: “./dist/index.d.ts”,
“version”: “1.0.0-beta4”
}

can you please help.
Thanks in advance.

@swistach please help

I have asked @swistach to check your requests. He is currently out of the office.
Please send all future Angular 2+ questions at https://github.com/handsontable/angular-handsontable
It will allow us to easier track the progress of all Angular 2+ related questions. Additionally the questions may be also replied by someone from the wrapper community.

Hi @rizwanullah.rizwi

the following file is not enough to solve the case. We do not support a development of Angular 2 however if you could share the app (on the JS playground) we can try to help.

Besides that we highly encourage to update the app to the newest version as it solves all the previous issues.