Error: Cannot find module 'lodash' in angular-cli?

Question

OS

Mac OSX El Capitan

Versions

angular-cli: 1.0.0-beta.8 , node: 6.2.0, os: darwin x64

Description

I tried to add lodash library in angular-cli project:

npm install --save lodash
typings install lodash --global --save

Successfully installed in node_modules. 👍

system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'lodash': 'vendor/lodash',
};

/** User packages configuration. */
const packages: any = {
  'lodash': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
};

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'lodash/**/*.+(js|js.map)'
    ]
  });
};

And then I tried to import in a service in different ways:

import { chunk, intersection, zip } from 'lodash';
```
Error: Cannot find module 'lodash'
```

declare var _; const {chunk, intersection, zip} = _;

 Error: Cannot find name 'chunk'
        Cannot find name 'intersection'
        Cannot find name 'zip'

I don't found the way to use lodash...

I did something wrong? I miss something? Is there an issue?

Thank you very much,

Aral.

Official docs:

https://github.com/angular/angular-cli/wiki/3rd-party-libs

you can see this answer stackoverflow.com/questions/37712677/… — pd farhad
– pd farhad, Commented Jun 30, 2016 at 4:11

codef0rmer · Accepted Answer · 2016-06-27 10:52:17Z

8

Change system-config.ts to:

const map: any = {
  'lodash': 'vendor/lodash',
};

const packages: any = {
  'lodash': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index.js'
  }
};

And then import it as:

import 'lodash';
declare var _;

Finally use it as:

_.chunk();

edited Jun 27, 2016 at 10:52

answered Jun 27, 2016 at 8:49

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

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

3 Comments

ootwch Over a year ago

import 'lodash'; declare var _; This worked for me - did not even set format in packages. The import * as _ from 'lodash'; syntax worked perfectly on Plunker... any explanation?

codef0rmer Over a year ago

@ootwch Plunkr link?

ootwch Over a year ago

Here you go - this plunker is not designed to demonstrate this, this is just one of my experiments. plnkr.co/edit/kAcaV16mlXrso8jWpq8C?p=preview

Community · Accepted Answer · 2017-05-23 11:46:48Z

1

@codef0rmer answer is good, but if you want specific lodash dependencies and not the whole library, here is an answer with example on how to do that: https://stackoverflow.com/a/38317093/1426570

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jul 11, 2016 at 22:36

Urigo

3,18523 silver badges27 bronze badges

Collectives™ on Stack Overflow

Error: Cannot find module 'lodash' in angular-cli?

OS

Versions

Description

Similar questions (but don't answer my question):

Official docs:

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

OS

Versions

Description

Similar questions (but don't answer my question):

Official docs:

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related