在 Angular 组件中包含外部 Javascript 模块

Question

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

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

问题如下：

当我导入以下内容时，所谓的 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';

因为它可以为 gojs 或 rxjs 模块完成。但是我没有成功？

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

注意

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

Answer 1

在尝试使用 Javascript 模块花了相当多的时间后，主要开发人员为 RadialLayout 共享了一个粗略的打字稿文件。论坛上的Link有个zip file.

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

在 Angular 组件中包含外部 Javascript 模块

Include an external Javascript module in an Angular Component

systemjs

angular

注意

package.json 文件

`package.json` 文件