Search code examples
angularsystemjs

Include an external Javascript module in an Angular Component

I want to display this particular display diagram from GoJS(Radial Layout)

I have tried to convert the Javascript example mentioned on the page to Typescript.

Code Snippet is here: PasteBin for brewity

the problem is as follows:

the so called RadialLayout property does not exist when I import the following:

import * as go from 'gojs';

in the code:

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

I have the package in the node_modules/ folder and the specific file (RadialLayout.js) lies in:

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

The whole code for RadialLayout.js is here

I have tried playing around with the systemjs.config.js file where I tried adding:

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'
        },

so that in the component file I could so something like:

import { RadialLayout } from 'radiallayout';

as like it can be done for gojs or rxjs modules. But I am unsuccessful with it?

What is the way around this?

note

the author of GoJS has less ideas about how his work can be used in TypeScript (Angular) framework. I have asked him on the forum.

package.json file

part of this 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": {}
}
Solution

  • After a fair amount of time spent on trying to work around with the Javascript module, the Main developer shared a rough typescript file for the RadialLayout. The Link on the Forum has a zip file.

    Note: For references This GitHub Repo can be used.