如何將JointJS與使用Angular CLI構建的應用程序一起使用？

Question

我已經通過npm安裝了jointjs，並且還安裝了類型 ，並且代碼編譯/構建正常。

代碼

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文件，我添加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

好的我終於得到了jointj s工作與@angular CLI及以下步驟

在角項目目錄

1. 納克新的應用程序內
2. CD到您的應用程序內
3. 故宮內安裝的命令提示符jquery --save npm install @ types/jquery --save-dev
4. npm install backbone --save npm install @ types/backbone --save-dev
5. npm install jointjs --s AVE NPM安裝@類型/ jointjs --save-dev的
6. NPM安裝lodash@3.10.1 --save NPM安裝@類型/ lodash @ 3.10.1 --save-dev的

確保在的package.json項下的依賴關係，併爲devDepencies骨幹 ，jQuery的，jointjs，lodash顯示出來，並確保它們的版本

jointjs 1.0.3，backbome = 1.3.3，jQuery的= 3.1.1 ，lodash = 3.10.1

in 角cli.json文件

的風格屬性和腳本; []屬性添加像下面

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

您的組件聯合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插入一個簡單的Hello World應用程序：./node_modules/jointjs/dist/jointjs.js
3. 在angular.cli.json插入樣式：./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. 您應該在jquery和backbone的npm install命令上添加版本，以確保使用提到的建議版本。在代碼

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

3. 使用$，而不是jQuery的：

4. 也（additionaly）必須添加以下兩個CSS文件成角cli.json

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

這些例子與上面相同。 希望我能幫上忙。快樂編碼！