My current application (Evidentia) makes use of Jodit for inline textarea editing. It also uses JSZip to shrink files exported from the application. The problem is these packages don’t always play nice with Angular. They don’t play well with Typescript in Angular.

Jodit

Jodit is an “excellent Open Source WYSIWYG editor written in pure TypeScript without using additional libraries“. I used to in a previous version of Evidentia, mostly as part of a popup editor window. In the new version I have decided to use Jodit as an inline editor to improve the users workflow.

JSZip

JSZip is a “library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API.” Evidentia imports and exports files, in some cases compressing them. I also use a templating system for creating word documents, and need to be able to uncompress the template files to use them.

Nothing fancy, just simple.

HOWTO

I’ll skip the painful journey that took me here and jump right to the solution.

Of course we start by installing.

npm install jodit jszip

Then in the file that will use these packages (example taken from component.ts file)

import * as Jodit from 'jodit';
import * as JSZip from 'jszip';

The style file for Jodit can be referenced in angular.js as usual.

...
    "styles": [
        "node_modules/jodit/build/jodit.min.css"
    ],
...

Now for the key. In the root tsconfig.ts file add a reference in the path field.

...
    "paths": {
      "jszip": ["./node_modules/jszip/dist/jszip.min.js"],
      "jodit": ["../node_modules/jodit/build/jodit.min.js"]
     },
...

On yeah…

One final thing. If you introduce a path field in a child tsconfig.ts (or tsconfig.app.ts, tscongig.lib.ts, … you get the picture) Typescript will NOT see the reference to these packages in the root tsconfig.ts