30

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

Improve this question

6 Answers 6

Reset to default
103

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Worked for my webpack project. Thanks
Worked for Ionic 3 project. Just skipped Step 2 and it works.
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';
Improve this answer

1 Comment

i tried this, but then it responds with 'node_modules/underscore/underscore.js as "underscore"'
6

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.

Improve this answer

Comments

5

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

  1. Install underscore package:

    npm install underscore --save

  2. Add following to typings.json under globalDependencies:

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

  3. 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'
};

  4. Import "_" in my ts files:

    import * as _ from 'underscore';
Improve this answer

Comments

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';
Improve this answer

1 Comment

and for webpack applications?
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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.