Как использовать портативную библиотеку в угловом 2

Я новичок в части конфигурации в npm, я пытаюсь использовать портативную библиотеку в угловом 2 проекте, созданном с использованием углового cli (ng init). Я добавил определение типов для этого же.Как использовать портативную библиотеку в угловом 2

Вот мои 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" 
    ] 
    } 
}

дает мне ошибку:

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)

Я также пытался импортировать в ниже способом

import {Handsontable} from 'handsontable';

и это дает мне следующую ошибку

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>]

Я пробовал все пути от https://github.com/handsontable/handsontable/issues/3627

источник

2017-01-13 Shirish

В настоящее время HandsOnTable официально делает не поддерживать Угловые 2. Обратитесь к справочному руководству Форума here. Это запланировано на 1 квартал текущего года. Вы можете оставить свой голос за эту функцию here

Таким образом, вы должны будете использовать handsontable JS & CSS файлы непосредственно в angular2 приложение как this-

Step1: В Index.html, добавьте эти 2 линии-

<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: Пример AppComponent.ts выглядит 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, 
}); 

} 

}

Результат Выход:

Обратите внимание - Я использую angular2 финальную версию 2.0.0

источник

2017-01-23 10:34:58 Sanket

Это работало идеально для меня - спасибо !!!! – Alex

У меня точно такая же ошибка с угловым1.5. Это что-то известно? Есть ли другой способ заставить его работать? (связанный вопрос здесь: [ссылка] (http://stackoverflow.com/questions/43122567/handsontable-related-error-cannot-find-modules-numbro-moment-p ikaday-zeroclip)) – luthien

Можем ли мы использовать что-то вроде hot: Handsontable; вместо горячего: любой; Если да, то как? – Vaibhav

Спасибо за ответ,

@TSW Я попытался установить оба пакеты «numbro», а также «pikaday», но это не сработало.

@Sanket спасибо за решение, но как я использую угловую CLI я обнаружил, что добавление следующий фрагмент кода в угловом-cli.json работы

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

это может быть возможно только путем импорта handsontable, объявив его в пакете. json как handsontable загружает numbro и pikaday сам по себе. почему нужно использовать «handsontable.full.min.JS»

источник

2017-01-24 11:28:24 Shirish

Здравствуйте, Я столкнулся с такой же ошибкой, но все же я не могу ее решить. –

Это не отвечает на наш вопрос сейчас, но развитие на официальном обертка для углового 2+ scheduled for June

Update (август 29, 2017):. Теперь мы видим прогресс в развитии официальную упаковку Angular2 +, которую можно найти здесь: https://github.com/handsontable/angular-handsontable

источник

2017-06-15 06:52:30 tilo

Я купил версию pro, основанную на выпуске мая. И теперь оттуда, если есть поддержка для пользователей, у которых нет даты выхода. – Tampa

Как использовать портативную библиотеку в угловом 2

ответ

Смежные вопросы