如何将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" 
    ], 

这些例子与上面相同。 希望我能帮上忙。快乐编码！