Angular 2 CLI build with lodash

Question

import always results in an error 'cannot find module lodash'

import _ from 'lodash';

angular-cli-build.js

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)',
        '@ngrx/**/*.+(js|js.map)',
        '@angular/**/*.+(js|js.map)',
        '@angular2-material/**/*.js',
        'angularfire2/**/*.js',
        'firebase/*.js', 
        'lodash/**/*.js'
        ]
    });
};

system-config.js

// SystemJS configuration file, see links for more information
  // https://github.com/systemjs/systemjs
  // https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

  /***********************************************************************************************
   * User Configuration.
   **********************************************************************************************/
  /** Map relative paths to URLs. */
  const map: any = {
    '@angular2-material': 'vendor/@angular2-material',
    '@ngrx': 'vendor/@ngrx',
    'firebase': 'vendor/firebase/firebase.js',
    'angularfire2': 'vendor/angularfire2',
    'lodash': 'vendor/lodash'
  };

  /** User packages configuration. */
  const packages: any = {
    '@angular2-material/button': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'button.js'
    },
    '@angular2-material/card': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'card.js'
    },
    '@angular2-material/core': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'core.js'
    },
    '@angular2-material/checkbox': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'checkbox.js'
    },
    '@angular2-material/icon': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'checkbox.js'
    },
    '@angular2-material/input': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'input.js'
    },
    '@angular2-material/list': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'list.js'
    },
    '@angular2-material/sidenav': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'sidenav.js'
    },
    '@angular2-material/toolbar': {
      format: 'cjs',
      defaultExtension: 'js',
      main: 'toolbar.js'
    },
    '@ngrx/core': {
        main: 'index.js',
        format: 'cjs'
    },
    '@ngrx/store': {
        main: 'index.js',
        format: 'cjs'
    },
    'angularfire2': {
        defaultExtension: 'js',
        main: 'angularfire2.js'
    },
    'lodash': {
      main:'index.js', 
      defaultExtension:'js'
    }
  };

  ////////////////////////////////////////////////////////////////////////////////////////////////
  /***********************************************************************************************
   * Everything underneath this line is managed by the CLI.
   **********************************************************************************************/
  const barrels: string[] = [
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/http',
    '@angular/forms',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',

    // Thirdparty barrels.
    'rxjs',
    'lodash',

    // App specific barrels.
    'app',
    'app/services',
    'app/reducers',
    'app/dashboard',
    'app/http-start',
    'app/http-finish',
    'app/wikipedia-search-start',
    'app/wikipedia-search-finish',
    'app/todo-list',
    'app/todo-list-firebase',
    'app/todos',
    'app/todos-ngrx',
    'app/todos-firebase'
    /** @cli-barrel */
  ];

  const cliSystemConfigPackages: any = {};
  barrels.forEach((barrelName: string) => {
    cliSystemConfigPackages[barrelName] = { main: 'index' };
  });

  /** Type declaration for ambient System. */
  declare var System: any;

  // Apply the CLI SystemJS configuration.
  System.config({
    map: {
      '@angular': 'vendor/@angular',
      'rxjs': 'vendor/rxjs',
      'lodash': 'vendor/lodash',
      'main': 'main.js'
    },
    packages: cliSystemConfigPackages
  });

  // Apply the user's configuration.
  System.config({ map, packages });

typings.json

{
  "ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  },
  "dependencies": {
    "lodash": "registry:npm/lodash#4.0.0+20160723033700"
  }
}

Here is the repository and file I'm trying to use lodash in. You can clone the repository and npm install, npm start. Then uncomment out the lodash import in the following file to see the error occur.

https://github.com/ryanlangton/angular2-rxjs/blob/master/src/app/http-finish/http-finish.component.ts

Community · Accepted Answer · 2017-05-23 12:32:30Z

1

Please run

typings install lodash=dt~lodash -G

This will install typings for lodash and update it on relevant files. If it won't then please manually update typings.d.ts file with location of global install of lodash definition in typings dir.

Eg: /// <reference path="../typings/global/lodash/index.d.ts" />

For typescript to resolve a external dependencies of pure JS lib we have to provide type definition. Above steps are to provide the same.

You may have to adjust the system.config.ts file as lodash is pure JS lib and will not have index.js in lodash directory.

map: {
      lodash: 'vendor/lodash/lodash.js
}

and remove this code from packages

'lodash': {
  main:'index.js', 
  defaultExtension:'js'
}

Alternatively leave you mapping as it is and adjust packages to be like

'lodash': {
      main:'lodash.js', 
      defaultExtension:'js'
    }

For details see

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 23, 2016 at 18:47

Arpit Agarwal

4,03327 silver badges30 bronze badges

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

11 Comments

Ryan Langton Over a year ago

typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead

Ryan Langton Over a year ago

typings ERR! message Attempted to compile "lodash" as a global module, but it looks like an external module. You'll need to remove the global option to continue.

Ryan Langton Over a year ago

followed your instructions (other than I had to remove ambient flag and not use global either), still get the same error.. cannot find module lodash

Arpit Agarwal Over a year ago

Try 'typings install lodash=dt~lodash -G'

Arpit Agarwal Over a year ago

Can you post your typings.json file after running above command. do you see lodash folder inside typings/ambient/browser or similar path

|

Collectives™ on Stack Overflow

Angular 2 CLI build with lodash

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related