在Angular Component中包含外部Javascript模块

时间:2017-06-15 16:19:42

标签: angular systemjs

我想显示this particular display diagram from GoJS(Radial Layout)

我试图将页面上提到的Javascript示例转换为Typescript。

代码段位于:PasteBin for brewity

问题如下:

导入以下内容时,所谓的RadialLayout属性不存在:

import * as go from 'gojs';

代码中的

  $(go.RadialLayout, {... // RadialLayout does not exist for me

我有node_modules/文件夹中的包,特定文件(RadialLayout.js)位于:

--- node_modules/
          -- gojs/
            -- extensions/
                      - RadialLayout.js

RadialLayout.js的整个代码是here

我尝试过使用我尝试添加的systemjs.config.js文件:

map: {
            'app': 'app',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
            'ng2-cookies': 'npm:ng2-cookies/cookie.js',
            'gojs': 'npm:gojs/release/go.js',
    _here_-->'radiallayout': 'npm:gojs/extensions/RadialLayout.js'
        },

所以在组件文件中我可以这样:

import { RadialLayout } from 'radiallayout';

就像gojsrxjs模块一样。但我没有成功呢?

解决这个问题的方法是什么?

注释

GoJS 的作者对于如何在TypeScript(Angular)框架中使用他的工作的想法较少。我在论坛上问过他。

package.json档案

GitHub Repo

的一部分
{
    "name": "angular-nimble",
    "version": "1.0.0",
    "description": "NIMBLE front-end",
    "scripts": {
        "build": "tsc -p src/",
        "build:watch": "tsc -p src/ -w",
        "build:e2e": "tsc -p e2e/",
        "serve": "lite-server -c=bs-config.json",
        "serve:e2e": "lite-server -c=bs-config.e2e.json",
        "prestart": "npm run build",
        "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
        "pree2e": "npm run build:e2e",
        "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
        "preprotractor": "webdriver-manager update",
        "protractor": "protractor protractor.config.js",
        "pretest": "npm run build",
        "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
        "pretest:once": "npm run build",
        "test:once": "karma start karma.conf.js --single-run",
        "lint": "tslint ./src/**/*.ts -t verbose",
        "i18n": "./node_modules/.bin/ng-xi18n -p ./src/tsconfig.json"
    },
    "keywords": [],
    "author": "",
    "license": "Apache License 2.0",
    "dependencies": {
        "@angular/common": "2.4.0",
        "@angular/compiler": "2.4.0",
        "@angular/compiler-cli": "2.4.0",
        "@angular/core": "2.4.0",
        "@angular/forms": "2.4.0",
        "@angular/http": "2.4.0",
        "@angular/platform-browser": "2.4.0",
        "@angular/platform-browser-dynamic": "2.4.0",
        "@angular/platform-server": "2.4.0",
        "@angular/router": "3.4.0",
        "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.21",
        "angular-in-memory-web-api": "0.2.4",
        "core-js": "2.4.1",
        "gojs": "^1.7.12",
        "ng2-cookies": "1.0.10",
        "rxjs": "5.0.1",
        "systemjs": "0.20.11",
        "zone.js": "0.7.4"
    },
    "devDependencies": {
        "concurrently": "3.2.0",
        "lite-server": "2.2.2",
        "typescript": "2.0.10",
        "canonical-path": "0.0.2",
        "tslint": "3.15.1",
        "lodash": "4.16.4",
        "jasmine-core": "2.4.1",
        "karma": "1.3.0",
        "karma-chrome-launcher": "2.0.0",
        "karma-cli": "1.0.1",
        "karma-jasmine": "1.0.2",
        "karma-jasmine-html-reporter": "0.2.2",
        "protractor": "4.0.14",
        "rimraf": "2.5.4",
        "@types/node": "6.0.46",
        "@types/jasmine": "2.5.36"
    },
    "repository": {}
}

1 个答案:

答案 0 :(得分:0)

在花费大量时间尝试使用Javascript模块之后,主开发人员共享了RadialLayout的粗略打字稿文件。论坛上的链接有zip file

注意: 对于参考This GitHub Repo可以使用。