how to use underscore.js library in angular 2

Question

I trying to create an application with angular 2,and want use underscore.js library in my .ts files ,for example when i want use this function :

   let myId = _.rest([5, 4, 3, 2, 1]);

_ is not define and throw error and i dont want use declare var _ : any; in my module

score 101 · Answer 1 · answered Mar 14 '17 at 14:25

101

For a project based on https://cli.angular.io, I needed to do the following:

1) Import libraries

npm install underscore --save
npm install @types/underscore --save

2) in tsconfig.app.json, add underscore to array 'types':

"types": [
  "underscore"
]

3) In any component file I need to use underscore, I add this

import * as _ from 'underscore';

4) then I can use:

console.log('now: ', _.now());

and all functions of http://underscorejs.org

answered Mar 14 '17 at 14:25

nderoche

1,796
3
14
7

1

Worked for my webpack project. Thanks – Irfan Raza Nov 03 '17 at 19:38
2

Worked for Ionic 3 project. Just skipped Step 2 and it works. – Pradnya Sinalkar May 25 '18 at 10:10

score 23 · Accepted Answer · edited Nov 11 '16 at 12:16

23

You have to Add TypeScript Definitions for Underscore:

tsd install underscore

Configure SystemJS

System.config({
  [...]
  paths: {
    underscore: './node_modules/underscore/underscore.js'
  }
});

Finally import the Module

import * as _ from 'underscore';

edited Nov 11 '16 at 12:16

Aram Kocharyan

20,165
11
81
96

answered Jun 01 '16 at 13:11

Diego Unanue

6,576
8
47
67

i tried this, but then it responds with 'node_modules/underscore/underscore.js as "underscore"' – tCoe Jan 09 '18 at 15:26

kabangi julius · Answer 3 · 2016-06-28T08:59:54.580

Check this repo. It has an example for underscore

https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-underscore-library-to-your-project

I did this on my imports to make it work

//Place this at the top near your imports
/// <reference path="../../../../typings/globals/underscore/index.d.ts" />
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import * as _ from 'underscore';

Make sure you have the right reference path to underscore typings.

score 5 · Answer 4 · answered Sep 28 '16 at 10:03

For a project based on the angular2-seed, I needed to:

Install underscore package:
```
npm install underscore --save
```

Add following to typings.json under globalDependencies:

"underscore": "github:DefinitelyTyped/DefinitelyTyped/underscore",

Add following under project.config.ts:

this.SYSTEM_CONFIG_DEV.paths['underscore'] =
    `${this.APP_BASE}node_modules/underscore`;
this.SYSTEM_BUILDER_CONFIG.packages['underscore'] = {
    main: 'underscore.js',
    defaultExtension: 'js'
};

Import "_" in my ts files:
```
import * as _ from 'underscore';
```

score 4 · Answer 5 · edited Jun 20 '20 at 09:12

4

Underscore for Angular 4

I have included this library for Angular 4.0.2 using this way:

npm install underscore --save
npm install @types/underscore --save

systemjs.config.js

map: {
      // our app is within the app folder
      'app': 'app',
     .....
   // other libraries
      'rxjs':        'npm:rxjs',
      'underscore':  'npm:/underscore/underscore.js'  
 }

Finally:

import * as _ from 'underscore';

edited Jun 20 '20 at 09:12

Community

1
1

answered May 08 '17 at 19:42

Muhammad Shahzad

9,340
21
86
130

1

and for webpack applications? – Janatbek Orozaly Aug 03 '17 at 21:45

score 1 · Answer 6 · edited May 23 '17 at 12:10

1

You need to install underscore.d.ts typings in your project to use its js library. Check this to know how to include typings

edited May 23 '17 at 12:10

Community

1
1

answered Jun 01 '16 at 13:07

AishApp

4,142
2
29
33

how to use underscore.js library in angular 2

6 Answers6

Underscore for Angular 4

Linked