lodash 모듈을 가져 오는 데 어려움을 겪고 있습니다. npm + gulp을 사용하여 프로젝트를 설정하고 같은 벽을 계속 쳤습니다. 나는 일반 lodash를 시도했지만 lodash-es도 시도했습니다.

lodash npm 패키지 : (패키지 루트 폴더에 index.js 파일이 있음)

import * as _ from 'lodash';    

결과 :

error TS2307: Cannot find module 'lodash'.

lodash-es npm 패키지 : (lodash.js에서 패키지 루트 폴더로 기본 내보내기)

import * as _ from 'lodash-es/lodash';

결과 :

error TS2307: Cannot find module 'lodash-es'.   

꿀꺽 꿀꺽 꿀꺽 일과 웹 스톰 모두 같은 문제를보고합니다.

재미있는 사실은 오류가 없다는 것입니다.

import 'lodash-es/lodash';

... 물론 "_"는 없습니다 ...

내 tsconfig.json 파일 :

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

내 gulpfile.js :

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = 'app/**/*.ts';

gulp.task('ts', function () {
    var tscConfig = require('./tsconfig.json');

    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch', function() {
    gulp.watch([tsPath], ['ts']);
});

gulp.task('default', ['ts', 'watch']);

올바르게 이해하면 내 tsconfig의 moduleResolution : 'node'가 import 문을 lodash 및 lodash-es가 설치된 node_modules 폴더를 가리켜 야합니다. 나는 또한 절대 경로, 상대 경로와 같은 여러 가지 수입 방법을 시도했지만 아무것도 작동하지 않는 것 같습니다. 어떤 아이디어?

필요한 경우 문제를 설명하기 위해 작은 zip 파일을 제공 할 수 있습니다.

Typescript 2.0 에서이 작업을 수행하는 방법은 다음과 같습니다 (tsd 및 입력은 다음과 같은 이유로 더 이상 사용되지 않습니다).

$ npm install --save lodash

# This is the new bit here: 
$ npm install --save-dev @types/lodash

그런 다음 .ts 파일에서

어느 한 쪽:

import * as _ from "lodash";

또는 (@Naitik이 제안한대로) :

import _ from "lodash";

차이점이 무엇인지 긍정적이지 않습니다. 우리는 첫 번째 구문을 사용하고 선호합니다. 그러나 일부는 첫 번째 구문이 작동하지 않는다고보고하고 다른 사람은 후자의 구문이 지연로드 된 웹 팩 모듈과 호환되지 않는다고 언급했습니다. YMMV.

2017 년 2 월 27 일 편집 :

아래 @Koert에 따르면 import * as _ from "lodash";Typescript 2.2.1, lodash 4.17.4 및 @ types / lodash 4.14.53의 유일한 작동 구문입니다. 그는 다른 제안 된 가져 오기 구문에 "기본 내보내기 없음"오류가 발생한다고 말합니다.

2016 년 9 월 26 일 업데이트 :

@Taytay의 답변에 따르면 몇 달 전에 사용한 '타이핑'설치 대신 다음을 사용할 수 있습니다.

npm install --save @types/lodash

해당 답변을 지원하는 몇 가지 추가 참조 사항은 다음과 같습니다.

• https://www.npmjs.com/package/@types/lodash
• NPM @types org 패키지의 TypeScript 타이핑

여전히 타이핑 설치를 사용하는 경우 '' '--ambient' ''및 '' '--global' ''에 대한 아래 주석 (다른 사용자의 설명)을 참조하십시오.

또한 새로운 빠른 시작에서 config는 더 이상 index.html에 없습니다. 이제 systemjs.config.ts에 있습니다 (SystemJS를 사용하는 경우).

원래 답변 :

이것은 내 Mac에서 작동했습니다 ( 빠른 시작에 따라 Angular 2를 설치 한 후 ) :

sudo npm install typings --global
npm install lodash --save 
typings install lodash --ambient --save

영향을받는 다양한 파일을 찾을 수 있습니다. 예 :

• /typings/main.d.ts
• /typings.json
• /package.json

Angular 2 빠른 시작은 System.js를 사용하므로 다음과 같이 index.html의 구성에 'map'을 추가했습니다.

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js'
    }
  });

그런 다음 내 .ts 코드에서 다음을 수행 할 수있었습니다.

import _ from 'lodash';

console.log('lodash version:', _.VERSION);

2016 년 중반부터 수정 :

@tibbus가 언급했듯이 일부 상황에서는 다음이 필요합니다.

import * as _ from 'lodash';

각도 2 종자 에서 시작하는 경우 가져 오기를 원하지 않는 경우 맵 및 가져 오기 단계를 건너 뛰고 tools / config / project.config.ts에서 lodash 행의 주석을 해제하십시오.

lodash로 테스트를 수행하려면 karma.conf.js의 파일 배열에 줄을 추가해야했습니다.

'node_modules/lodash/lodash.js',

먼저 첫 번째 것들

npm install --save lodash

npm install -D @types/lodash

전체 lodash 라이브러리로드

//some_module_file.ts
// Load the full library...
import * as _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)

또는 작업 할 함수 만로드

import * as debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)

UPDATE - March 2017

나는 현재 작업하고 ES6 modules있으며 최근에는 다음과 lodash같이 작업 할 수있었습니다 .

// the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) 
// Load the full library...
import _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)
...

또는 import구체적 lodash functionality:

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

참고 -차이 * as는 필요하지 않습니다syntax

참고 문헌 :

행운을 빕니다.

1 단계 : 의존성에 lodash를 포함하도록 package.json 파일을 수정하십시오.

  "dependencies": {
"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"lodash":"^4.12.0",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"  }

2 단계 : angular2 응용 프로그램에서 SystemJs 모듈 로더를 사용하고 있습니다. 그래서 lojs를 매핑하도록 systemjs.config.js 파일을 수정하고 있습니다.

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'lodash':                    'node_modules/lodash'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'lodash':                    {main:'index.js', defaultExtension:'js'}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);})(this);

3 단계 : 이제 npm 설치

4 단계 : 파일에서 lodash를 사용합니다.

import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);

Typescript 2.0부터 @types npm 모듈은 입력을 가져 오는 데 사용됩니다.

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

이제이 질문에 대한 답변을 얻었으므로 lodash를 효율적으로 가져 오는 방법으로갑니다.

main.ts에서 전체 라이브러리를 가져 오는 안전한 방법

import 'lodash';

이것은 새로운 비트입니다.

필요한 기능으로 더 가벼운 lodash 구현

import chain from "lodash/chain";
import value from "lodash/value";
import map from "lodash/map";
import mixin from "lodash/mixin";
import _ from "lodash/wrapperLodash";

출처 : https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

추신 : 위 기사는 빌드 시간 개선 및 앱 크기 축소에 대한 흥미로운 기사입니다.

다음 명령을 사용하여 프로젝트에서 lodash를 성공적으로 가져 왔습니다.

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

그런 다음 다음과 같은 방식으로 가져 왔습니다.

import * as _ from 'lodash';

그리고 systemjs.config.js에서 나는 이것을 정의했다 :

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

나는 정확히 같은 문제가 있었다, 그러나 Angular2 응용 프로그램에서,이 문서가 단지 그것을 해결 : https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

기사 요약 :

1. 라이브러리 설치 npm install lodash --save
2. Lodash에 대한 TypeScript 정의 추가 tsd install underscore
3. 스크립트 포함 <script src="node_modules/lodash/index.js"></script>
4. SystemJS 구성 System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. 가져 오기 모듈 import * as _ from ‘lodash’;

당신의 경우에도 도움이되기를 바랍니다.

또 다른 우아한 솔루션은 필요한 모든 것을 가져 오는 것이 아니라 모든 lodash를 가져 오는 것이 아닙니다.

import {forEach,merge} from "lodash";

그런 다음 코드에서 사용하십시오.

forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})

다른 사람이이 문제를 겪고 "중복 식별자"문제로 인해 위의 해결책 중 어느 것도 작동하지 않으면 다음을 실행하십시오.

npm install typings --global

이전 버전의 타이핑에서는 문제가 발생하고 많은 "중복 식별자"문제가 발생합니다. 또한 --ambient내가 말할 수있는 한 더 이상 사용할 필요가 없습니다 .

따라서 타이핑이 최신 상태이면 Angular 2 빠른 시작을 사용하여 작동합니다.

운영:

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

먼저 이것을 systemjs.config.js에 추가하십시오 :

'lodash':                     'node_modules/lodash/lodash.js'

이제 모든 파일에서 사용할 수 있습니다. import * as _ from 'lodash';

입력 폴더를 삭제 npm install하고 여전히 문제가있는 경우 실행 하십시오.

참고 npm install --save앱이 생산 코드에서 필요로 어떤 의존성이 촉진됩니다.
"타이핑"은 TypeScript에서만 필요하며 JavaScript로 변환됩니다. 따라서 프로덕션 코드에 포함하고 싶지 않을 것입니다. devDependencies대신에 대신 프로젝트에 넣는 것이 좋습니다

npm install --save-dev @types/lodash

또는

npm install -D @types/lodash

(예를 들어 Akash 게시물 참조). 그건 그렇고, 그것은 ng2 tuto에서 수행되는 방식입니다.

또는 package.json의 모양은 다음과 같습니다.

{
    "name": "my-project-name",
    "version": "my-project-version",
    "scripts": {whatever scripts you need: start, lite, ...},
    // here comes the interesting part
    "dependencies": {
       "lodash": "^4.17.2"
    }
    "devDependencies": {
        "@types/lodash": "^4.14.40"
    }
}

팁

좋은 점은 npm단순히 시작 npm install --save하거나 --save-dev사용 가능한 최신 버전의 종속성에 대해 잘 모르는 경우 시작할 수 있으며 package.json나중에 사용할 수 있도록 자동으로 설정한다는 것입니다 .

나는 lodash-es또한 타이핑을 만들었 으므로 이제 실제로 다음을 수행 할 수 있습니다

설치

npm install lodash-es -S
npm install @types/lodash-es -D

용법

import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");

롤업을 사용하는 경우 lodash트리 쉐이크가 올바르게 수행되므로 대신 이것을 사용하는 것이 좋습니다 .

lodash 에서 부분 가져 오기는 다음 표기법을 사용하여 각도 4.1.x 에서 작동해야합니다 .

let assign = require('lodash/assign');

또는 'lodash-es'를 사용하고 모듈에서 가져 오십시오.

import { assign } from 'lodash-es';

를 통해 설치하십시오 npm.

$ npm install lodash --save

이제 import파일에서 :

$ import * as _ from 'lodash';

ENV :

앵귤러 CLI : 1.6.6
노드 : 6.11.2
OS : darwin x64
앵귤러 : 5.2.2 타입
스크립트 : 2.4.2
웹팩 : 3.10.0

1. lodash 설치

sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save

2. index.html에서 lodash에 대한 맵을 추가하십시오.

System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });

3. .ts 코드에서 lodash 모듈 가져 오기

import _ from 'lodash';

시스템 JS가 아닌 웹 팩으로 ng2를 사용하고 있습니다. 나를 위해 필요한 단계는 다음과 같습니다.

npm install underscore --save
typings install dt~underscore --global --save

그런 다음 파일에서 밑줄을 다음으로 가져옵니다.

import * as _ from 'underscore';

via typings및 tsd명령 관리 는 궁극적으로 npm via 사용을 위해 사용되지 않습니다 npm install @types/lodash.

그러나 import 문에서 "모듈 lodash를 찾을 수 없습니다"라는 문제로 오랫동안 어려움을 겪었습니다.

import * as _ from 'lodash';

궁극적으로 Typescript는 node_modules / @ types에서 버전 2부터 유형을로드하고 VsCode Language 서비스는 여전히 1.8을 사용하므로 편집기에서 오류를보고한다는 것을 알았습니다.

VSCode를 사용하는 경우 포함시키고 싶을 것입니다

"typescript.tsdk":  "node_modules/typescript/lib"

VSCode settings.json 파일 (작업 공간 설정)에서 typescript version> = 2.0.0을 통해 설치했는지 확인하십시오. npm install typescript@2.0.2 --save-dev

그 후 편집자는 import 문에 대해 불평하지 않았습니다.

후에도 작동하지 않으면

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

당신은 이것을 시도하고 lodash를 가져옵니다

typings install lodash --save

npm install --save @types/lodash

https://www.npmjs.com/package/@types/lodash

모든 터미널을 설치하십시오 :

npm install lodash --save
tsd install lodash --save

index.html에 경로 추가

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

.ts 파일 맨 위에 lodash 가져 오기

import * as _ from 'lodash'

preboot / angular-webpack 사용하여 Angular 4.0.0을 사용하고 있으며 약간 다른 경로를 거쳐야했습니다.

@Taytay가 제공하는 솔루션은 주로 저에게 효과적이었습니다.

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

다음을 사용하여 함수를 주어진 .component.ts 파일 로 가져 오기 :

import * as _ from "lodash";

"기본"익스포트 된 클래스가 없기 때문에 작동합니다. 내 차이점은 타사 라이브러리에로드 할 수있는 방법을 찾아야한다는 것입니다 : vendor.ts :

src/vendor.ts

내 vendor.ts 파일은 다음과 같습니다.

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

어쩌면 너무 이상하지만, 위의 제안을 통해 다시 설치 된 lodash를 올바르게 설치했기 때문에 위의 어느 것도 나를 도우 지 못했습니다.

너무 짧은 이야기는 문제는 lodash의_.has 방법을 사용하여 연결 되었습니다 .

JS in연산자 를 사용하여 간단하게 수정했습니다 .

시도 >> tsd install lodash --save

다음과 같은 오래된 요구를 통해 가져올 수도 있습니다.

const _get: any = require('lodash.get');

이것이 우리를 위해 일한 유일한 것입니다. 물론 가져 오기 후에 require () 호출이 오는지 확인하십시오.