"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

Question

"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

I've begun working on a fantastic seed project that can be found at: https://github.com/AngularClass/angular2-webpack-starter

However, I've encountered an issue with integrating third-party modules. Can anyone offer guidance on how to properly add and utilize external modules in this project?

For instance, when trying to incorporate 'immutable' using the following command:

npm install immutable --save

After installation, I attempted to import the module within a component like so:

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

Despite my efforts, I continue to encounter the error TS2307: Cannot find module 'immutable'. The same issue arises when attempting to include modules such as 'moment'.

typescript angular webpack immutable.js

Answer 1

Answer №1

Ensure to include a typings file in your project located at

node_modules\immutable\dist\immutable.d.ts

. Make sure to reference it properly in your project, following this example:

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

If you need typings for Moment, they can be found on DefinitelyTyped. I suggest using tsd for installation.

In case there are no available typings for a library you want to use, refer to this question for an alternative method. Keep in mind that you might not benefit from the advantages of Typescript in such cases.

Answer 2

Ensure to include a typings file in your project located at

node_modules\immutable\dist\immutable.d.ts

. Make sure to reference it properly in your project, following this example:

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

If you need typings for Moment, they can be found on DefinitelyTyped. I suggest using tsd for installation.

In case there are no available typings for a library you want to use, refer to this question for an alternative method. Keep in mind that you might not benefit from the advantages of Typescript in such cases.

Answer 3

Answer №2

Update: Insert the following code snippet into your main.ts file.

import 'immutable'

By including this in your main.ts file, you will have easy access to the immutable API across all your components without the necessity of extra imports.

Answer 4

Update: Insert the following code snippet into your main.ts file.

import 'immutable'

By including this in your main.ts file, you will have easy access to the immutable API across all your components without the necessity of extra imports.

Answer 5

Answer №3

Here's a potential solution for individuals utilizing a third-party (npm) JavaScript module without typings definitions who wish to resolve the "cannot find module" error:

Let's say you are using the npm package jsonapi-serializer and including it in your example.ts file:

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

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

Your compiler will display an error message:

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

To address this issue, you can generate your own typings definition by creating a file named jsonapi-serializer.d.ts. In this file, outline the main functions using the any type to keep it straightforward. (You may want to consider contributing the definition file to DefinitelyTyped if you come up with a comprehensive definition):

declare module 'jsonapi-serializer' {

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

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

By adding this file to your project, the compiler will acknowledge the module. If this method fails, you can also reference it from your ExampleService.ts file by including the following line at the beginning of the file:

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

Answer 6

Here's a potential solution for individuals utilizing a third-party (npm) JavaScript module without typings definitions who wish to resolve the "cannot find module" error:

Let's say you are using the npm package jsonapi-serializer and including it in your example.ts file:

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

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

Your compiler will display an error message:

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

To address this issue, you can generate your own typings definition by creating a file named jsonapi-serializer.d.ts. In this file, outline the main functions using the any type to keep it straightforward. (You may want to consider contributing the definition file to DefinitelyTyped if you come up with a comprehensive definition):

declare module 'jsonapi-serializer' {

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

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

By adding this file to your project, the compiler will acknowledge the module. If this method fails, you can also reference it from your ExampleService.ts file by including the following line at the beginning of the file:

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

"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

Answer №1

Answer №2

Answer №3

Similar questions

Transform string enum type into a union type comprising enum values

What is the reason behind typescript making it necessary for me to find a way to set a value of type

Getting a date object that is three months prior to the current date in Typescript

Electron Searching for Files in Main Directory

Obtain data from a single module and incorporate it into a different one

Retrieve the service variable in the routing file

What is the most efficient way to apply multiple combinations for filtering the information within a table?

Vuefire encountering an issue with Vue 3 and throwing a Vue.use error

Don't forget to include the line 'import "reflect-metadata"' at the beginning of your entry point for Jest tests

When moving from Babel version 5.8.35 to 6.0.0, be prepared for app.js to throw a SyntaxError and encounter an unexpected token during compilation

Having difficulty accessing certain code in TypeScript TS

Obtain redirected JSON data locally using Angular 5

Is it possible to access BreakpointObserver in Angular Material before the page has finished loading?

Having too many node modules installed through npm in an Angular 2 quickstart project

An issue was encountered in the node_modules folder while attempting to access the 'Exclude' name in the lodash collection file. The error message reads: (1783,24): error TS2304: Cannot

Utilize a custom Angular2 validator to gain entry to a specific service

Utilizing TS2722 alongside restrictive parameters in tsconfig

Verify the validity of an image URL

Validation in custom components within an Angular reactive form is failing to function correctly

Choose a Spot on the Open Layers map using a marker or icon