Angular2 - Angular-CLI installing lodash - Cannot find module

Question

Mac OSX El capitan | angular-cli: 0.1.0 | node: 5.4.0 | os: darwin x64

I try to install a 3rd party npm module according to the angular-cli wiki: https://github.com/angular/angular-cli/wiki/3rd-party-libs but fail. I've been struggling with this for days now and would greatly appreciate any help.

Steps to get the error:

ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save

angular-cli-build.json:

module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; ng build (lodash gets correctly added in dist/vendor)

system-config.ts:

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

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

(all according to spec in https://github.com/angular/angular-cli/wiki/3rd-party-libs) Note - I've tried all config settings I can think of here, all giving the same result.

lodashtest3.component.ts: import * as _ from 'lodash';

ng build

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/danielmattsson/git/lodashtest3/tmp/broccoli_type_script_compiler-input_base_path-g2lDIaq6.tmp/0/src/app/lodashtest3.component.ts (2, 20): Cannot find module 'lodash'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:456:9)
    at process._tickCallback (node.js:385:13)

The broccoli plugin was instantiated at:
    at BroccoliTypeScriptCompiler.Plugin (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:280:18)
    at Angular2App._buildTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:101:23)
    at new Angular2App (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:42:23)
    at module.exports (/Users/danielmattsson/git/lodashtest3/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

EDIT: more information according to comments below

dist/index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Lodashtest3</title>
  <base href="/">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Service worker support is disabled by default.
       Install the worker script and uncomment to enable.
       Only enable service workers in production.
  <script type="text/javascript">
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/worker.js').catch(function(err) {
        console.log('Error installing service worker: ', err);
      });
    }
  </script>
  -->
</head>
<body>
  <lodashtest3-app>Loading...</lodashtest3-app>

  <script src="vendor/es6-shim/es6-shim.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/zone.js/dist/zone.js"></script>

  <script>
    System.import('system-config.js').then(function () {
      System.import('main');
    }).catch(console.error.bind(console));
  </script>
</body>
</html>

Joppa

Can you check your dist/index.html , where lodash.js path is showing or can you post your dist/index.html code. I had similar problem with jquery. So I may help :) – Dorree

Please check the path you provided 'lodash': 'vendor/lodash/lodash.js' is correct ? because npm install will install lodash in node_modules directory – Wesson

@pdfarhad I've added dist/index.html to the original post. – Joppa

@HardipsinhJadeja Yes lodash is installed in node_modules, but angular-cli/webpack then puts it in dist/vendor/lodash/lodash.js. The spec (github.com/angular/angular-cli/wiki/3rd-party-libs) says 'vendor/xx' too, so I think that is correct. – Joppa

perhaps duplicate of [#37718259 – Worsham

Answer 1

With the stable release and current angular-cli (1.0.0-beta.15), it's simply adding the npm package plus type definitions

npm install lodash --save
npm install @types/lodash --save-dev

For early versions such as 1.0.0-beta.15, the next is necessary. It should not be required for current versions:

Add the library to the angular-cli.json to list of global scripts (add "../node_modules/lodash/lodash.js" to the list apps[0].scripts).

See https://github.com/angular/angular-cli#global-library-installation

Flossi

I changed your answer to the correct one, since this is now changed as of the latest release. Thank god they made this easier :) – Joppa

as of 1.0.0-beta.26 I still need to use declare const _:any; which also messes up auto-complete. – Clemen

The current version of cli (@angular/[email protected]) the process specified on @Eric Liprandi 's answer should be updated as correct as is no longer necessary to add the entire library on global (angular-cli.json). Is a much better practice to add it in scope using import syntax. – Skirling

Answer 2

FWIW, as of today (1.0.0-beta.26), adding the scripts entry is not necessary anymore.

Simply add the proper entries to package.json using:

npm i --save lodash
npm i --save-dev @types/lodash

Then, in your TypeScript code, use:

import * as _ from 'lodash';

The code will run just fine.

In my case, actually adding the scripts entry was causing issues.

Amenity

Answer 3

[updated answer] After the new version of angular-cli (1.0.0-beta.15):

just add

npm install lodash --save
npm install @types/lodash --save-dev

then add the library to the angular-cli.json to list of global scripts(add "../node_modules/lodash/lodash.js" to the list apps[0].scripts).

and in your component where you want to use , try this way

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

before : angular-cli (1.0.0-beta.15):

add this line in src/index.html

  <script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

and in your component where you want to use , try this way

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

I tried straight away , it worked for me

Dorree

Thanks a lot, yes it worked and I will use it as a workaround until they get better support for 3rd party libs. The purpose of webpack/systemjs is to compile the libs and load them (so you don't have to add anything to index.html). However, it seems very unstable so I guess solutions like this have to do until it gets better. Thanks again! – Joppa

@DanielMattsson : I updated my answer. my previous answer was for your specific question. and It was accepted by you. As the new version has came, I updated the answer – Dorree

Answer 4

In order to support 3rd party libraries in Angular CLI and System.js, you have to specify them manually on system.config.ts and angular-cli-build.js. I've answered it here with example for lodash and also other dependencies.

Philanthropy

Answer 5

As of 4/15/2017 with @angular/cli 1.0.0:

You need to be very specific about which versions you install otherwise the TypeScript bindings will give all sorts of failures. What I did is update my devDependencies as follows in package.json:

"@types/lodash": "ts2.0"

Clapperclaw

This is what worked for me with 1.0.0-beta.28.3, lodash 4.15.0, @types/lodash ts2.0. – Marinamarinade