如何将JointJS与使用Angular CLI构建的应用程序一起使用? [英] How can I use JointJS with an application built with Angular CLI?

问题描述

我已经通过npm安装了jointjs，还安装了类型 并且代码可以编译/构建良好.

I have installed jointjs via npm and also installed typings and code compiles/builds fine.

代码

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的脚本和样式

my cli.json file.. added the scripts and styles for 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": {}
  }
}

我在其中添加allowJs的tsconfig.json文件

my tsconfig.json file where i added allowJs to 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"
    ]
  }
}

我无法弄清楚如何创建此链接上提供的简单的hello world应用程序 http://resources.jointjs.com/tutorial/hello-world

I am not able to figure out how to create a simple hello world application provided on this link http://resources.jointjs.com/tutorial/hello-world

推荐答案

好的，我终于可以使Jointjs与@angular cli一起工作了，下面是步骤

ok i finally got to get jointjs working with @angular cli and below are the steps

在命令提示符下在角度项目目录中

1. ng新的您的应用
2. cd进入您的应用
3. npm install jquery --save npm install @ types/jquery --save-dev
4. npm安装主干--save npm install @ types/backbone --save-dev
5. npm install jointjs-保存npm install @ types/jointjs --save-dev
6. npm install lodash@3.10.1-保存npm install @ types/lodash @ 3.10.1 --save-dev

1. ng new your-app
2. cd into your-app
3. npm install jquery --save npm install @types/jquery --save-dev
4. npm install backbone --save npm install @types/backbone --save-dev
5. npm install jointjs --save npm install @types/jointjs --save-dev
6. npm install lodash@3.10.1 --save npm install @types/lodash@3.10.1 --save-dev

确保 package.json 中的条目显示在以下项的依赖项和devDepencies下 主干，jquery，jointjs，lodash并确保它们是版本

Make sure in package.json the entries show up under dependencies and devDepencies for backbone, jquery, jointjs, lodash and make sure they are of the versions

jointjs 1.0.3，backbome = 1.3.3，jquery = 3.1.1，lodash = 3.10.1

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

在 angular-cli.json 文件中

在styles属性和脚本中； []属性添加如下的联合js详细信息

in the styles property and scripts;[ ] property add the joint js details like below

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

在您的component.html

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

在您的组件中.

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() as joint.shapes.basic.Rect;
    rect2.translate(300);

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

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

这篇关于如何将JointJS与使用Angular CLI构建的应用程序一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！