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

问题描述

我已经通过 npm 安装了 Jointjs 并安装了 Typings并且代码编译/构建良好.

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": {}
  }
}

我的 tsconfig.json 文件，我在其中添加了 allowJs 为 true

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

在命令提示符中在angular项目目录中

in the command prompt within the angular project directory

1. 新建你的应用
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 --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 属性和scripts;[ ] 属性中添加如下的联合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>

在你的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() 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屋！