Cannot include JS library in Typescript with Webpack in Angular2

Question

I'm not sure what part of this process is failing but I would appreciate any sort of help on this.

I have a vendor library (BigDecimal.js) that I'm attempting to import and use in my angular2 application. I can get it to transpile just fine by adding a definition file in my typings directory (I also tried it in my source directory) but webpack doesn't add the variable injection into the source file. (I guess it's just assuming that it's declared globally).

If it helps, here is the definition file thus far:

declare namespace BigDecimalLibrary {
    interface MathContext {
        ROUND_CEILING: number
        ROUND_DOWN: number
        ROUND_FLOOR: number
        ROUND_HALF_DOWN: number
        ROUND_HALF_EVEN: number
        ROUND_HALF_UP: number
        ROUND_UNNECESSARY: number
        ROUND_UP: number

        // TODO: Populate this if we ever need it
    }

    interface BigDecimal {
        // CONSTANTS
        ROUND_CEILING: number
        ROUND_DOWN: number
        ROUND_FLOOR: number
        ROUND_HALF_DOWN: number
        ROUND_HALF_EVEN: number
        ROUND_HALF_UP: number
        ROUND_UNNECESSARY: number
        ROUND_UP: number
        ZERO: BigDecimal
        ONE: BigDecimal
        TEN: BigDecimal


        // INSTANCE METHODS

        div(a:number, b: number): number
        abs(context?: MathContext): BigDecimal
        add(rhs: BigDecimal, context?: MathContext): BigDecimal
        compareTo(rhs: BigDecimal, context?: MathContext): number
        divide(rhs: BigDecimal, context?: MathContext): BigDecimal
        divideInteger(rhs: BigDecimal, context?: MathContext): BigDecimal
        max(rhs: BigDecimal, context?: MathContext): BigDecimal
        min(rhs: BigDecimal, context?: MathContext): BigDecimal
        multiply(rhs: BigDecimal, context?: MathContext): BigDecimal
        negate(context?: MathContext): BigDecimal
        plus(context?: MathContext): BigDecimal
        pow(rhs: BigDecimal, context?: MathContext): BigDecimal
        remainder(rhs: BigDecimal, context?: MathContext): BigDecimal
        subtract(rhs: BigDecimal, context?: MathContext): BigDecimal
        equals(rhs: BigDecimal, context?: MathContext): boolean
        format(before: number, after: number, explaces?: number, exdigits?: number, exform?: number, exround?: number): string
        intValueExact(): number
        movePointLeft(digits: number): BigDecimal
        movePointRight(digits: number): BigDecimal
        scale(): number
        setScale(scale: number, round?: number): BigDecimal
        signum(): number
        toString(): string
        round(precision: number, mode: number): BigDecimal
        isGreaterThan(rhs: BigDecimal): boolean
        isLessThan(rhs: BigDecimal): boolean
        isGreaterThanOrEqualTo(rhs: BigDecimal): boolean
        isLessThanOrEqualTo(rhs: BigDecimal): boolean
        isPositive(): boolean
        isNegative(): boolean
        isZero(): boolean

    }

    interface BigDecimalStatic {
        // CONSTANTS
        ROUND_CEILING: number
        ROUND_DOWN: number
        ROUND_FLOOR: number
        ROUND_HALF_DOWN: number
        ROUND_HALF_EVEN: number
        ROUND_HALF_UP: number
        ROUND_UNNECESSARY: number
        ROUND_UP: number
        ZERO: BigDecimal
        ONE: BigDecimal
        TEN: BigDecimal

        new (number: string|string[], offset?: number, length?: number): BigDecimal
    }
}

declare module 'big-decimal' {
    var BigDecimal: BigDecimalLibrary.BigDecimalStatic;
    export = BigDecimal;
}

declare var BigDecimal: BigDecimalLibrary.BigDecimalStatic;

At the top of my ts files, I'm using the following to import the class:

import BigDecimal = BigDecimalLibrary.BigDecimal;

I've tried copying the directory to a vendor directory and just doing an npm install big-decimal. Is there something I need to configure in webpack? I'm just lost as to where to even begin.

EDIT

I've been able to work around this issue by using the following:

import BigDecimalType = bigdecimal.BigDecimal;
const BigDecimal = require('big-decimal').BigDecimal;

And replacing all type references with "BigDecimalType" and leaving the remaining references alone. This is not ideal but will work for now.

Have you tried just doing `import { BigDecimal } from './bigdecimal'` — Jacques ジャック, Jun 20 '16 at 20:34
That isn't working. I get a "Cannot resolve file or directory" regardless of where I put the definition file — sgcharlie, Jun 20 '16 at 20:46
At the very bottom of your bigdecimal file, add this line: `export { BigDecimal };` — Jacques ジャック, Jun 20 '16 at 20:48
I added that as well with several different imports and it didn't work. — sgcharlie, Jun 20 '16 at 21:06

score 0 · Answer 1 · edited May 23 '17 at 11:46

When using webpack the most important thing, is to know is, if the 3rd party library implements the UMD pattern. and has typings defined.

Simplest case:

Here the lib has both UMD implemented + typings package defined. In that case all you need to do is install both packages and write
import xxx from 'xxx';
and you are good to go.

NO UMD || Typings
In those cases, you need more work. The solution I describe here will point you in the right direction and can be used for any third party library.

npm install xxx --save        (xxx = 'bigdecimal' in your case)
write your own d.ts file || install it
npm install expose-loader (in case the third party library doesn't impl. UMD module pattern.)

With those packages installed, you have to do the following:
inside your component.ts:

write a triple slash to import the typings, so your intellisense is happy
/// <reference path="path-to-your-custom-.d.ts" />
import the library.
import 'expose?BigDecimal!../../../node_modules/xxx.js;
declare a var of type any (works in all cases) and assing it to the var you exposed in step 2 (BigDecimal in this case)
let BigDecimal: any = BigDecimal;

A like wise solution is describe here: how to install adal.js

Cannot include JS library in Typescript with Webpack in Angular2

1 Answers1