CODEWITHSUNDEEP
angularionic2
Colonel Mustard
Colonel Mustard

Reputation: 1533

unable to import lodash in angular2 project

I have an app written in ionic2 and I'm using lodash. With a simple npm install lodash on the command line and import * as _ from 'lodash' and I can access lodash via _ with no issues

I've started a new app in angular2 cli, which is what ionic is built on, and I've tried to do the same thing. i've run npm install lodash on the command line and import * as _ from 'lodash' but once I try to compile the application I get ERROR in {DIRECTORY_PATH}/src/app/otherlists/otherlists.component.ts (2,20): Cannot find module 'lodash'. and I can't seem to get it working. I've even copied the lodash folder from the node_modules and its no different..

What am I missing?

EDIT,

to demonstrate this further, I've created a brand new app from scratch. ng new parser this creates a new angular project. Next command is npm install --save lodash and I import the library into my project with import * as _ from 'lodash'; Once I try and run it with ng serve I get the following error:

ERROR in C:/dev/ionic/parser/src/app/mainpage/mainpage.component.ts (2,20): Cannot find module 'lodash'.

If I run npm install --save-dev @types/lodash I get a long list of errors starting with

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8604,32): ',' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8607,14): ']' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8607,15): ';' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8610,26): ',' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8610,42): '(' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8610,61): ',' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8610,66): ')' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8612,15): ';' expected.

ERROR in C:/dev/ionic/parser/node_modules/@types/lodash/index.d.ts (8612,25): Declaration or statement expected.

For posterity, here's my package.json

{
  "name": "parser",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "lodash": "^4.17.4",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "^4.14.71",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

Upvotes: 0

Views: 481

Answers (1)

Z. Bagley
Z. Bagley

Reputation: 9260

You need to install both the package and the typings:

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

You will then be able to access the types in the normal way using import * as _ from 'lodash'

This github repository shows an example of use with Angular 4 and Angular CLI 1.3.

Upvotes: 2

Related Questions