2

I am new to configuration part in npm, i am trying to use handsontable library in angular 2 project created using angular-cli (ng init). I added the typescript definition for the same.

Here is my app.compponent.ts

import { Component } from '@angular/core';
import 'handsontable/dist/handsontable.full.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  ngOnInit() {
  }
  ngAfterViewInit() {
    const myData = [
            ["1", "2", "3", "4", "5", "6"]
        ];

        const config = {
            data: myData,
            colHeaders: ['A', 'B', 'C', 'D', 'E', 'F'],
            startRows: 5,
            startCols: 5,
            minSpareCols: 1,
            //always keep at least 1 spare row at the right
            minSpareRows: 1
            //always keep at least 1 spare row at the bottom,
        };
        (<any>$("#test")).handsontable(config);
  }
}

app.component.html

<h1>
  <div id ="test"></div>
</h1>

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularStart2</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

tsconfig.js

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

gives me error: 

ReferenceError: Handsontable is not defined at r.fn.init.$.fn.handsontable (http://localhost:4200/vendor.bundle.js:87583:26) at AppComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:79:20)

I have also tried to import in below way

import {Handsontable} from 'handsontable';

and it gives me following error

Uncaught Error: Cannot find module 'numbro'
    at newRequire (handsontable.js:53) [<root>]
    at :8000/vendor.bundle.js:102461:16 [<root>]
    at Object.23.cellTypes (handsontable.js:4439) [<root>]
    at newRequire (handsontable.js:58) [<root>]

I have tried all ways from https://github.com/handsontable/handsontable/issues/3627

Alan Kavanagh
  • 9,425
  • 7
  • 41
  • 65
Shirish
  • 69
  • 2
  • 8

3 Answers3

5

At present, HandsOnTable officially do not support Angular 2. Refer Forum reference here. It is planned for Q1 this year. You can leave your vote for this feature here

Hence, you will have to use handsontable js & css files directly into angular2 app like this-

Step1: In Index.html, add these 2 lines-

<link rel="stylesheet" href="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.css">

<script src="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.js"></script>

Step2: Sample AppComponent.ts looks like this-

import { Component, AfterViewInit } from '@angular/core';

declare var Handsontable: any;

@Component({
    selector: 'my-app',
    template: `
<h3>Angular2 Final 2.0.0</h3>
<h2>Handsontable Performance Test (10000x100)</h2>

<div id="example"></div>
    `
})

export class AppComponent implements AfterViewInit { 

container: any;
hot: any;

ngAfterViewInit() {
this.container = document.getElementById('example');

this.hot = new Handsontable(this.container, {
  data: Handsontable.helper.createSpreadsheetData(10000, 100),
  rowHeaders: true,
  colHeaders: true,
  // performance tip: set constant size
  colWidths: 80,
  rowHeights: 23,
  // performance tip: turn off calculations
  autoRowSize: false,
  autoColSize: false,
});

}

}

Result Output:

Result

Please note - I am using angular2 Final version 2.0.0

Sanket
  • 19,295
  • 10
  • 71
  • 82
  • I'm having the same exactly error with angular1.5. Is it something known? Is there another way to make it work? (related question here: [link](http://stackoverflow.com/questions/43122567/handsontable-related-error-cannot-find-modules-numbro-moment-pikaday-zeroclip) ) – luthien Mar 31 '17 at 15:46
  • Can we use something like hot: Handsontable; instead of hot: any; If yes how ? – Vaibhav Jun 20 '17 at 08:53
  • @Vaibhav give a try and see what happens. – Sanket Jun 20 '17 at 10:16
  • Not working for me too - ERROR TypeError: Cannot read property 'insertBefore' of null - I have the pro version and bought based – Tampa Jun 24 '17 at 13:19
  • Hello @Sanket , Can i get the HotModule using your approach to import inside Module.ts file and use as directive inside html file like : ? – Kunal Kakkad Nov 22 '17 at 14:36
  • Apologies @KunalKakkad I havent tried new handsontable yet. Refer this [link](https://handsontable.github.io/angular-handsontable/quick-start) – Sanket Nov 22 '17 at 19:08
0

Thanks for response,

@TSW I tried to install both packages "numbro" as well as "pikaday" but it didnt worked out.

@Sanket thanks for solution but as i am using angular cli i found that adding following snippet in angular-cli.json works

"scripts": [
            "./../node_modules/jquery/dist/jquery.min.js",
            "./../node_modules/handsontable/dist/handsontable.full.min.js"
        ],

Could this be possible only by importing handsontable by declaring it in package.json as handsontable downloads numbro and pikaday by itself. why it is needed to use "handsontable.full.min.js"

Shirish
  • 69
  • 2
  • 8
0

This does not answer our question for now, but development on the official wrapper for Angular 2+ is scheduled for June.

Update (August 29, 2017): We now see progress on the development of the official Angular2+ wrapper, which may be found here: https://github.com/handsontable/angular-handsontable

tilo
  • 14,009
  • 6
  • 68
  • 85
  • I bought the pro version based on a release of May. And as of now from there iffy support for pro users there appears to be no date for release. – Tampa Jun 24 '17 at 12:26