可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have installed jointjs via npm and also installed typings and code compiles/builds fine.
Code
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; } }
Error shows up on the browser:
Failed to compile. /home/vinay/angularapps/jjs/src/app/app.component.ts (17,31): Property 'Graph' does not exist on type '{}'.)
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": {} } }
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" ] } }
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
回答1:
ok i finally got to get jointjs working with @angular cli and below are the steps
in the command prompt within the angular project directory
- ng new your-app
- cd into your-app
- npm install jquery --save npm install @types/jquery --save-dev
- npm install backbone --save npm install @types/backbone --save-dev
- npm install jointjs --save npm install @types/jointjs --save-dev
- npm install lodash@3.10.1 --save npm install @types/lodash@3.10.1 --save-dev
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
in angular-cli.json file
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" ],
in your component.html
<div id="paper"></div>
in your 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]); }
回答2:
Just to mention there are a few things wrong or missing in the accepted answer:
includes in component.ts should be:
declare var $:JQueryStatic; import * as _ from 'lodash'; import * as backbone from 'backbone'; import * as joint from 'jointjs';
you should add the version on the npm install commands for jquery and backbone to ensure to use the suggestioned version as mentioned.
you also (additionaly) must add following 2 css files into angular-cli.json:
"../node_modules/jointjs/css/themes/material.css", "../node_modules/jointjs/css/themes/default.css"
use $ in the code rather than jQuery:
let paper = new joint.dia.Paper({ el: $('#paper'), ... });
hth some one,
PS: i tested it with angular 4.1 and angular-cli 1.0.3
回答3:
I'm using @angular/cli : 1.0.4 version and im going to sum everything you need to run JointJS without a problem.
Use these commands to install npm packages correctly and make sure the right versions are present. Types on devdependencies and the libraries on normal dependencies thats important.
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
This is my scripts in the angular-cli.json file:
"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/lodash/index.js", "../node_modules/backbone/backbone.js", "../node_modules/jointjs/dist/joint.js" ]
This is my styles in the angular-cli.json file to work properly:
"styles": [ "styles.scss", "../node_modules/jointjs/css/layout.css", "../node_modules/jointjs/css/themes/material.css", "../node_modules/jointjs/css/themes/default.css" ],
And the examples are same as above. Hope i could help. Happy Coding!
回答4:
npm install jointjs --save- at angular.cli.json insert at scripts :
./node_modules/jointjs/dist/jointjs.js - at angular.cli.json insert at styles :
./node_modules/jointjs/css/layout.css
翻译