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
Post a Comment