As I delve into the realm of configuration in npm, I am attempting to integrate the handsontable library into an Angular 2 project built with angular-cli (ng init). I have included the TypeScript definition for the library as well.
Below is the content of my app.component.ts file:
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);
}
}
Within app.component.html:
<h1>
<div id ="test"></div>
</h1>
Contents of 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>
Details from 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"
]
}
}
Encountering the 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)
Attempted to import in the following manner as well:
import {Handsontable} from 'handsontable';
Resulting in the 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>]
Having exhausted all solutions from https://github.com/handsontable/handsontable/issues/3627