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.

Community · Accepted Answer · 2017-05-23 12:09:51Z

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.

@Alexey Yes. You can it to the "files" section of your tsconfig.json file. If you're using the exclude syntax, just make sure it's not excluded. I also edited my answer to provide a link to the moment typings.
@rgvassar ...and if lib doesn't have typescript definitions?
@deostroll The last part of my answer contains a link to another question, which addresses that exact situation.

user2263572 · Accepted Answer · 2016-02-25 21:43:34Z

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.

Could you suggest algorithms of actions for libraries that doesn't include types? 'moment' for example?

dvtoever · Accepted Answer · 2016-08-30 13:55:30Z

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"/>

Collectives™ on Stack Overflow

Angular2-Webpack-Typescript - 3rd party libraries

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions