How to include 3rd party library that uses older import approach to Angular4.x?

Question

What is the proper workflow to include the library to angular 4.0 and use it inside a component?

My steps:

yarn add mathjs

Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 component can use it. JHipster utilizes Webpack and Yarn.

Then I tried to add to Component (docs):

import { mathjs } from "./mathjs";  

and

var math = require('mathjs');

Those were not working. What am I missing?

UPDATE:

It seems like mathjs uses older approach suggesting var math = require('mathjs'). Maybe it is similar to JQuery question in some way...

UPDATE2

Answer 1

This is a great question and I'm glad you ask because I wish I had what I'm about to write the first time I encountered this little problem. This is a typescript/javascript and webpack issue before it is an angular issue. I definitely am planning a writeup on my blog soon as possible.

Your Scenario:

You run

npm install mathjs

1. Now you try to use math.js from a component:

2. Find math.js dist js file (node_modules/mathjs/dist/math.js) and reference like this

   import {mathjs} from "../../node_modules/mathjs/dist/math";

3. But you get error message saying "set --allowJS". You do that like this:

   Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...

4. Now you get:

ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable code detected.

5. Looking in the math.js source, you see that it is an old school module but there is no root wrapper function (one function to bring them all and in the darkness bind them..) (more on that later).

Solution: install a typings file for the target lib (@types/mathjs)

1. First, check to see if you can get @typings files for your module here https://microsoft.github.io/TypeSearch/

2. Grab mathjs typings file from npm (https://www.npmjs.com/package/@types/mathjs) and Run npm install to add the typings .d.ts files to the target lib's node_modules directory

   npm install --save @types/mathjs

3. Add your type ref correctly

   import * as mjs from "mathjs"

Use it like this:

console.log("e was: " + mjs.e);

I have the complete solution for the math.js lib on my github here https://github.com/res63661/importOldJSDemoWithTypings/

More: For examples look no further than your own angular project. CLI creates node_modules folder each time you run npm install after creating a new project with ng new . Dig down into here and note the d.ts files for many of the .js files.

When messing with typings or defining your own (.d.ts files) be sure to restart your server between builds as the typings don't seem to update currently on the fly

Further reading:

1. http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
2. https://angular.io/guide/typescript-configuration#typescript-typings
3. https://microsoft.github.io/TypeSearch/

Lastly:

If you are in a pinch and this is not working for you, I did have success creating a custom wrapper for a different (much smaller) module by wrapping it in a master export type

export var moduleNamer = (function(){
  //module implementation
}());

then dumping the .js file local to my component and then referencing it as follows:

//reference like this from your component:
import {moduleNamer} from "./source";  //from source.js

--rich