ExtensionsTS at Typescript project

GoJS
1

I’m trying to import some extension to progect written in Typescript. (app based on Angular 6)
But compliler throws me an error and suggest to write you.

how I use it

image.png710×56 26.7 KB

compliler throws me

image.png1879×234 269 KB

How to fix this issue? Should I add something or you need to make some changes?

2

Right now our extensionsTS folder is set up to build UMD modules, and I think you want to import as an ES6 module for it to work with your TypeScript project.

The easiest way to fix this is to delete the .js files from the extensionsTS directory, and change the tsconfig.json file to use ES6 modules instead of UMD modules:

          compilerOptions: {
            "module": "ES6",
            "target": "ES6",
            "noImplicitAny": true
          }

Then, run tsc in the extensionsTS directory to build new .js sources that are ES6 modules. Once you have done this, you can use:

import { DrawCommandHandler } from 'gojs/extensionsTS/DrawCommandHandler.js';

Let me know if that works.

You might be able to integrate the TS into your project instead of pre-building compatible JS, but I’m not yet clear how that works in an Angular workflow. We do have a sample with Vue doing that currently, here: GoJS-projects/vue-webpack at master · NorthwoodsSoftware/GoJS-projects · GitHub

Note how in the vue webpack.config.js, I added:

      // files with `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          // We want to override the tsconfig file currently in:
          // vue-webpack\node_modules\gojs\extensionsTS
          // Because it uses ES5 + umd modules and we want to use ES6 + ES6.
          compilerOptions: {
            "module": "ES6",
            "target": "ES6",
            "noImplicitAny": true
          }
        }
      },

Perhaps you can do something similar in Angular.

3

GoJs is dependancy in my project, I can’t change it locally. I am able to add this to deploy process but it looks like raw solution.
Angular is one of the most popular framework and Extensions are powerfull features. Tell me please Are you going to make using Extensions in Angular easier?

4

That’s what the ExtensionsTS directory is for. The problem is that it appears you are expecting to use ES6 modules rather than UMD modules.

Yes, we’ll make these easier to use.

In the meantime you can just copy the .TS file(s) that you need into your project as if you had written them.

5

I’ve already done it. I created vendor folder and put here all needed files.
I’m looking forward implementing ES6 modules.

6

Simon’s instructions above show you how to change all of the compiled files to be in ES6 module format instead of UMD format.

7

The Angular project here:

https://github.com/NorthwoodsSoftware/GoJS-projects/tree/master/angular-basic

now uses one of the classes from ExtensionsTS. See my changeset for how I did it:

Note that in extensionsTS, the file tableLayout.ts has a bug, you’ll need to change:

	var spanners = [];
	var nosize = [];

to

	var spanners: Array<go.Part> = [];
	var nosize: Array<go.Part> = [];

or it may not compile. That will be in the next release.