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

My steps:

yarn add mathjs

Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 ponent 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

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

My steps:

yarn add mathjs

Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 ponent 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

• javascript
• angular
• typescript
• jhipster

3 Answers 3

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 ponent:

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) { "pilerOptions": { "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./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 plete solution for the math.js lib on my github here https://github./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/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 ponent and then referencing it as follows:

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

--rich

I did this way and it worked for angular9.

First install npm package mathjs.

npm install mathjs

Then import in your ponent or directive.

import { round } from 'mathjs'

You may test with this.

console.log(round(math.pi, 3) )

Try to include the script into index.html:

<script src="./assets/math.js" type="text/javascript"></script>

Then add this into your ponent file:

declare const math; 

You can then use math in your ponent:

ngOnInit(): void {
    console.log(math.sqrt(-4););
}