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

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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 '17 at 12:32

Community

1
1

answered Jul 23 '16 at 18:47

Arpit Agarwal

3,993
24
30

typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead – Ryan Langton Jul 23 '16 at 18:55
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 Jul 23 '16 at 18:57
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 – Ryan Langton Jul 23 '16 at 19:03
Try 'typings install lodash=dt~lodash -G' – Arpit Agarwal Jul 23 '16 at 19:03
Can you post your typings.json file after running above command. do you see lodash folder inside typings/ambient/browser or similar path – Arpit Agarwal Jul 23 '16 at 19:07
I've posted my typings.json.. I see lodash in typings/globals/lodash – Ryan Langton Jul 23 '16 at 19:11
I don't see any thing missing. I hope lodash is installed in node_modules have same version and typings. all this should work. Can you also show your typings.d.ts and walk down to all /// reference and see if you reach lodash installed inside typings ? – Arpit Agarwal Jul 23 '16 at 19:16
Just add a /// Referece to index.js of lodash installed in typings directory on top of file containing import for lodash – Arpit Agarwal Jul 23 '16 at 19:17
Eg: /// – Arpit Agarwal Jul 23 '16 at 19:21
That works, thanks. Was hoping I could get away with not having any /// in my files, but guess I have to with this. – Ryan Langton Jul 23 '16 at 19:24
yes that was a intermediate steps. This entry should be in typings.d.ts file. If above command not added it than manually add it here. – Arpit Agarwal Jul 24 '16 at 07:10

Angular 2 CLI build with lodash

1 Answers1

Linked