Как я могу использовать JointJS с приложением, созданным с помощью Angular CLI?

Question

Я установил jointjs через npm, а также установил типизацию и код компилирует/строит отлично.

Код

import { Component } from '@angular/core'; 
import * as joint from '../../node_modules/jointjs/dist/joint.min'; 


export class AppComponent { 
    title = 'app works!'; 
    constructor(
) { 
    // console.log(joint)// private jint: joint, 
    } 

    ngOnInit() { 
    var graph = new joint.dia.Graph; 
    } 
} 

Ошибка появляется в браузере:

Failed to compile. 

/home/vinay/angularapps/jjs/src/app/app.component.ts (17,31): Property 'Graph' does not exist on type '{}'.) 

мой cli.json файл .. добавлены скрипты и стили для jointjs

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "version": "1.0.0-beta.32.3", 
    "name": "jjs" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css", 
     "../node_modules/jointjs/css/layout.css" 
     ], 
     "scripts": ["../node_modules/jointjs/dist/joint.js"], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "files": "src/**/*.ts", 
     "project": "src/tsconfig.json" 
    }, 
    { 
     "files": "e2e/**/*.ts", 
     "project": "e2e/tsconfig.json" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "component": {} 
    } 
} 

мой TSconfig. json file, где я добавил allowJs в true

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

Я не могу понять, как создать простой привет мир приложения, доступных на этой ссылке http://resources.jointjs.com/tutorial/hello-world

Answer 1

ОК, я, наконец, получил, чтобы получить ы работы с @angular кли и ниже шаги

в командной строке в угловом каталоге проекта

1. нг новый ваш-приложение
2. компакт-диск в приложение
3. НПМ установки jquery --save npm install @ types/jquery --save-dev
4. npm install basebone --save npm install @ types/backbone --save-dev
5. npm install jointjs --s пр НПМ установки @ типов/jointjs --save-DEV
6. НПМ установить lodash@3.10.1 --save НПМ установить @ типов/lodash @ 3.10.1 --save-Дев

Убедитесь в package.json записи отображаются при зависимостях и devDepencies для позвоночника, JQuery, jointjs, lodash и убедитесь, что они из версий

jointjs 1.0.3, backbome = 1.3.3, JQuery = 3.1.1 , lodash = 3.10.1

в угловой cli.json файла

в собственности и скриптах стилей [] свойства добавлять совместные Js деталей как ниже

"styles": [ 
    "styles.css", 
    "../node_modules/jointjs/css/layout.css" 
    ], 
    "scripts": [ 
    "../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/jointjs/dist/joint.js" 
    ], 

в компоненты.HTML

<div id="paper"></div> 

в вашего component.ts

import * as jQuery from 'jquery'; 
import * as _ from 'lodash'; 
import * as $ from 'backbone'; 
const joint = require('../../../../node_modules/jointjs/dist/joint.js'); 

ngOnInit() { 
    let graph = new joint.dia.Graph; 

    let paper = new joint.dia.Paper({ 
     el: jQuery("#paper"), 
     width: 600, 
     height: 200, 
     model: graph, 
     gridSize: 1 
    }); 

    let rect = new joint.shapes.basic.Rect({ 
     position: { x: 100, y: 30 }, 
     size: { width: 100, height: 30 }, 
     attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } 
    }); 

    let rect2 = rect.clone(); 
    // rect2.translate(300); 

    var link = new joint.dia.Link({ 
     source: { id: rect.id }, 
     target: { id: rect2.id } 
    }); 

    graph.addCells([rect, rect2, link]); 
} 

Answer 2

1. npm install jointjs --save
2. в angular.cli.json вставки в скриптах: ./node_modules/jointjs/dist/jointjs.js
3. at angular.cli.json insert в стилях: ./node_modules/jointjs/css/layout.css

Answer 3

Просто говоря, есть несколько вещей неправильно или отсутствуют в принятом ответе:

1. включает в компоненте. ts должно быть:

   declare var $:JQueryStatic; 
   import * as _ from 'lodash'; 
   import * as backbone from 'backbone'; 
   import * as joint from 'jointjs'; 
   

2. вы должны добавить версию на команды установки npm для jquery и магистрали, чтобы обеспечить использование предполагаемой версии, как упомянуто выше.

3. вы также (дополнительно) необходимо добавить следующие 2 CSS файлы в угловом-cli.json:

   "../node_modules/jointjs/css/themes/material.css", 
   "../node_modules/jointjs/css/themes/default.css" 
   

4. использовать $ в коде, а не JQuery:

   let paper = new joint.dia.Paper({ 
       el: $('#paper'), 
       ... 
   }); 
   

hth some one,

PS: я проверил его с угловым 4.1 и угловым cli 1.0.3

Answer 4

Я использую @ angular/cli: 1.0.4 версию, и я собираюсь суммировать все, что вам нужно для запуска JointJS без проблем.

Используйте эти команды для правильной установки пакетов npm и убедитесь, что имеются правильные версии. Для них важны типы на devdependencies и библиотеки на обычных зависимостях.

npm install --save lodash@3.10.1 jquery@3.1.1 backbone jointjs 
npm install --save-dev @types/lodash@3.10.1 @types/jquery @types/backbone @types/jointjs 

Это мои скрипты в файле углового cli.json:

"scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/lodash/index.js", 
    "../node_modules/backbone/backbone.js", 
    "../node_modules/jointjs/dist/joint.js" 
    ] 

Это мои стили в файле углового cli.json работать правильно:

"styles": [ 
    "styles.scss", 
    "../node_modules/jointjs/css/layout.css", 
    "../node_modules/jointjs/css/themes/material.css", 
    "../node_modules/jointjs/css/themes/default.css" 
    ], 

И примеры такие же, как и выше. Надеюсь, что смогу помочь. Счастливое кодирование!