Angular2-Webpack-Typescript - 3rd party libraries

Question

I've started with a beautiful seed project: https://github.com/AngularClass/angular2-webpack-starter

And I've stuck with using 3rd-party modules.Can someone help/explain how to properly add/use external modules to this project?

For example, I'm adding 'immutable' using:

npm install immutable --save

After that, I'm trying to link that module inside a component:

import * as immutable from 'immutable';
import {List} from 'immutable';
import Immutable = require('immutable');

Nothing helps, it always returns TS2307: Cannot find module ' immutable '. The same for ' moment ' for example.

Answer 1

There is a typings file you need to add to your project that is located in node_modules\\immutable\\dist\\immutable.d.ts . You need to reference that in your project. It should look something like this:

/// <reference path="node_modules/immutable/dist/immutable.d.ts" />
import * as immutable from 'immutable';
import {List} from 'immutable';
import Immutable = require('immutable');

For moment there are typings available at DefinitelyTyped . I recommend using tsd to install them.

If you come across a library you would like to use that you can't find any typings for, you can see this question for an easy way to still use it. You just won't get any of the Typescript benefits.

Answer 2

Edit: Add the below to your main.ts file.

import 'immutable'

This should give you access to the imputable api within all your components without the need for any additional importing.

Answer 3

Let me give a possible workaround for people who are using a third party (npm) javascript module for which there is no typings definition and want to get rid of the "cannot find module" error message

Suppose you use the npm package jsonapi-serializer and you reference it in your example.ts file:

import {Serializer, Deserializer} from "jsonapi-serializer";

@Injectable()
export class ExampleService {
  var deserializer = new Deserializer({ keyForAttribute: 'camelCase'});
}

The compiler will complain: Error:(1, 40) TS2307:Cannot find module 'jsonapi-serializer'.

You can declare the typings definition yourself by creating the following file: jsonapi-serializer.d.ts . You have to specify the main functions, but using the any type you can keep it relatively simple. (Consider donating the definition file if you create a complete definition):

declare module 'jsonapi-serializer' {

    export class Serializer {
        constructor(type: string, ...options: any[]);
        serialize(arg: any)
    }

    export  class Deserializer {
        constructor(...options: any[]);
        deserialize()
    }
}

If you place this file in your project the compiler will recognize the module. When this doesn't work you can also reference it from your ExampleService.ts file by placing the following line on top of the file:

///<reference path="jsonapi-serializer.d.ts"/>