gpt4 book ai didi

angular - 我如何将 JointJS 与使用 Angular CLI 构建的应用程序一起使用?

转载 作者:太空狗 更新时间:2023-10-29 19:36:20 26 4
gpt4 key购买 nike

我已经通过 npm 安装了 jointjs 并且还安装了 typings并且代码可以正常编译/构建。

代码

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

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

最佳答案

好的,我终于让 jointjs 与@angular cli 一起工作,下面是步骤

在命令提示符下在 Angular 项目目录中

  1. 新的你的应用
  2. cd 进入你的应用
  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--保存开发

确保 在 package.json 中的条目显示在 dependencies 和 devDepencies 下backbone, jquery, jointjs, lodash 并确保它们是版本

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

angular-cli.json 文件中

在 styles 属性和 scripts;[ ] 属性中添加如下所示的联合 js 详细信息

  "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]);
}

关于angular - 我如何将 JointJS 与使用 Angular CLI 构建的应用程序一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42328292/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com