angular - Importing lodash into angular2 + typescript application -


i having hard time trying lodash modules imported. i've setup project using npm+gulp, , keep hitting same wall. i've tried regular lodash, lodash-es.

the lodash npm package: (has index.js file in package root folder)

import * _ 'lodash';     

results in:

error ts2307: cannot find module 'lodash'. 

the lodash-es npm package: (has defaut export in lodash.js package root folder)

import * _ 'lodash-es/lodash'; 

results in:

error ts2307: cannot find module 'lodash-es'.    

both gulp task , webstorm report same issue.

funny fact, returns no error:

import 'lodash-es/lodash'; 

... of course there no "_" ...

my tsconfig.json file:

{   "compileroptions": {     "target": "es5",     "module": "system",     "moduleresolution": "node",     "sourcemap": true,     "emitdecoratormetadata": true,     "experimentaldecorators": true,     "removecomments": false,     "noimplicitany": false   },   "exclude": [     "node_modules"   ] } 

my gulpfile.js:

var gulp = require('gulp'),     ts = require('gulp-typescript'),     uglify = require('gulp-uglify'),     sourcemaps = require('gulp-sourcemaps'),     tspath = 'app/**/*.ts';  gulp.task('ts', function () {     var tscconfig = require('./tsconfig.json');      gulp.src([tspath])         .pipe(sourcemaps.init())         .pipe(ts(tscconfig.compileroptions))         .pipe(sourcemaps.write('./../js')); });  gulp.task('watch', function() {     gulp.watch([tspath], ['ts']); });  gulp.task('default', ['ts', 'watch']); 

if understand correctly, moduleresolution:'node' in tsconfig should point import statements node_modules folder, lodash , lodash-es installed. i've tried lots of different ways import: absolute paths, relative paths, nothing seems work. ideas?

if necessary can provide small zip file illustrate problem.

here how of typescript 2.0: (tsd , typings being deprecated in favor of following):

$ npm install --save lodash  # new bit here:  $ npm install --save @types/lodash 

then, in .ts file:

either:

import * _ "lodash"; 

or (as suggested @naitik):

import _ "lodash"; 

i'm not positive difference is. use , prefer first syntax. however, report first syntax doesn't work them, , else has commented latter syntax incompatible lazy loaded webpack modules. ymmv.

edit on feb 27th, 2017:

according @koert below, import * _ "lodash"; working syntax of typescript 2.2.1, lodash 4.17.4, , @types/lodash 4.14.53. says other suggested import syntax gives error "has no default export".


Comments

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

jquery - Clone last and append item to closest class -

c - Unrecognised emulation mode: elf_i386 on MinGW32 -