lodashをangular2 + typescriptアプリケーションにインポートする


262

lodashモジュールをインポートするのに苦労しています。npm + gulpを使用してプロジェクトをセットアップし、同じ壁にぶつけ続けました。私は通常のロダッシュだけでなく、ロダッシュも試しました。

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'.   

gulpタスクとwebstormの両方が同じ問題を報告します。

面白い事実、これはエラーを返しません:

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'は、lodashとlodash-esがインストールされているnode_modulesフォルダーをimportステートメントで指し示す必要があります。また、絶対パス、相対パスなど、さまざまなインポート方法を試しましたが、何も機能しないようです。何か案は?

必要に応じて、問題を説明する小さなzipファイルを提供できます。


1
私もこの問題に遭遇しました。lodashライブラリには、モジュール形式で含まれるtypecript定義がないため、importステートメントは機能しません。唯一の回避策は、index.htmlファイル内のlodashへのスクリプト参照を作成してから、typescriptファイル内のlodash.d.tsを参照することです。うまくいけば、これはすぐに修正されます。これについて別の回避策がある場合は、それを聞きたいです。
brando

1
zipファイルは素晴らしいでしょう。しかし、モジュールローダー(jspmやwebpackなど)を使用していないようですか?スクリプトタグを使用して、Angularをどのように読み込んでいますか?同様にhtmlを投稿してください。モジュールローダーとしてwebpackを使用することをお勧めします。ここに例を示します-> github.com/jhades/angular2-library-example/tree/master/examples/…これは最小限のスターターです-> github.com/jhades/ng2- webpack-minimal
Angular University、

このリンクを参照してください:github.com/DefinitelyTyped/DefinitelyTyped/issues/4889
brando

1
これをメールのtsファイルに追加しただけです。/// <reference path = "../ typings / tsd.d.ts" />
Davy

現在のところ、上記のどれも動作しません。angular.2.4.4スタックを使用しています。

回答:


442

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";

私は違いが何であるかについては前向きではありません。最初の構文を使用し、優先します。ただし、最初の構文は機能しないと報告する人もいれば、後者の構文は遅延読み込みされたWebpackモジュールと互換性がないとコメントした人もいます。YMMV。

2017年2月27日に編集:

以下の@Koertによるとimport * as _ from "lodash";、Typescript 2.2.1、lodash 4.17.4、および@ types / lodash 4.14.53の時点で唯一有効な構文です。彼は、他の推奨されるインポート構文は「デフォルトのエクスポートがない」というエラーを与えると述べています。


7
を使用すると、これが機能することを確認できますtypescript 2.0.3。実際typings@typesnpmパッケージを優先して削除する方がはるかにクリーンです。
エイドリアンモイサ2016

8
import * as _ from "lodash";私にはうまくいかなかったが、import _ from "lodash";うまくいった。
Gabe O'Leary

5
警告の言葉、私はimport _ from "lodash"構文が遅延ロードされたwebpackモジュールと互換性がないことを発見しました。なぜだかわかりませんが、詳しく調べていません。
トム・マキン

6
「lodash」からインポート_; 2.0ではもう機能しません。import * as _ from "lodash"を使用する必要があります。
ロジャーファー

6
これがsave-devを使用して、開発のみではなく、生産に使用する必要があります: npm install --save-dev @types/lodash あなたは奇妙な問題とバグを見ている場合は、この試してください: npm install --save-dev @types/lodash@4.14.50
leetheguy

64

2016年9月26日更新:

@Taytayの答えが言うように、数か月前に使用した「タイピング」インストールの代わりに、次を使用できます。

npm install --save @types/lodash

その答えを裏付けるいくつかの参考文献を以下に示します。

まだタイピングのインストールを使用している場合は、 '' '-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の設定に「マップ」を追加しました。

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';

angular2-seedから始めて、毎回インポートしたくない場合は、マップとインポートの手順をスキップして、tools / config / project.config.tsのlodash行のコメントを外してください。

lodashでテストを機能させるために、karma.conf.jsのfiles配列に行を追加する必要もありました。

'node_modules/lodash/lodash.js',

TypeScriptの問題はこれで解決したようですが、ブラウザーでページをロードすると、モジュールlodashが見つからないというエラーが表示されます。node_modulesではなく、「/ lodash」へのxhrリクエストが失敗したようです。
ザック

1
@zackで見逃し map: { lodash: 'node_modules/lodash/lodash.js' } ましたSystem.configか?
xwb1989

5
私にとっては、それはimport * as _ from 'lodash'で
tibbus 2016年

1
...そして、なぜimport * as _ from 'lodash'代わりに書く必要があるのimport _ from 'lodash'ですか?
smartmouse 2016

2
@smartmouseはの--ambient前者です--global。後者は、1.xで使用されており、今後も前進します。しかし、最新のlodash 4.xがそのようなグローバルモジュールとしてコンパイルされるとは思いません。
demisx

25

まず最初に

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


参照:

ここに画像の説明を入力してください

幸運を。


「ECMAScript 2015モジュールを対象とする場合、インポート割り当ては使用できません」
ツールキット

@Toolkit。ご指摘ありがとうございます。答えを更新しました。このソリューションが機能するかどうかを確認し、適切にマークしてください。
Akash

2
import debounce from 'lodash/debounce'利回りTS1192: Module node_modules/@types/lodash/debounce has no default export"allowSyntheticDefaultImports": false
KROSS

1
私は以前のコメントを支持します。現在、typesファイルにはデフォルトのエクスポートがないため、allowSyntheticDefaultImports falseを指定しても機能しません。
クロス

1
@krossまた"allowSyntheticDefaultImports": true、エラーを回避するには、tsconfig.jsonファイルにコンパイラオプションを追加する必要がある場合があります。
Akash

24

ステップ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 installを実行します

手順4:ファイルでlodashを使用する。

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

あなたのソリューションはTypeScriptタイピングをどのように処理しますか?npm lodashパッケージに.d.tsファイルが含まれていないようです。
Vitali Kniazeu 16

13

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';

これはここの新しいビットです:

必要な機能を備えたより軽いロダッシュの実装

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

PS:上記の記事は、ビルド時間の改善とアプリサイズの縮小に関する興味深い記事です


1
TSCにとってこれはすばらしいことですが、バンドラーに関して他の問題を引き起こします。ロールアップを通じてこれを機能させることができた可能性はありますか?aurelia-cliでも問題が発生します:(。 ロールアップエラー: 'default'はnode_modules \ lodash \ kebabCase.jsによってエクスポートされません Aurelia cliエラー:そのようなファイルまたはディレクトリはありません\ lodash \ kebabCase.js'
スティーブンLautier

7
@ types / lodashはまだ軽量の構文をサポートしていないようです。 error TS1192: Module '"node_modules/@types/lodash/chain/index"' has no default export. 短いimport chain from "lodash/chain"インポートを試みる他のモジュールなど
jamsinclair

10

次のコマンドを使用して、プロジェクトにlodashを正常にインポートしました。

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

次に、次の方法でインポートしました。

import * as _ from 'lodash';

そしてsystemjs.config.jsで私はこれを定義しました:

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


8

私はまったく同じ問題を抱えていましたが、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’;

あなたのケースにも役立つことを願っています


6
tsdは非推奨になりました。タイピングを使用する必要があります
hhsadiq

7

別のエレガントなソリューションは、必要なものだけを取得することです。

import {forEach,merge} from "lodash";

それをコードで使用します

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

5
これは実際に機能しますか?私はこれを試しました、そしてそれはバンドルのサイズを変えないようです。
コーディ

1
おそらく当時ではなかったかもしれませんが、今はそうです。それは最高で揺れている木です
Pian0_M4n 2017年

@ Pian0_M4n多分私はそれを間違っているのですが、角度cli 1.4.4でツリーを振ってみましたがうまく
いき

@alexKhymenkoあなたはエラーを投稿できますか?ロダッシュに接続されていますか?
Pian0_M4n 2017年

@ Pian0_M4nエラーはなく、ツリーが揺れているだけです。forEachおよびmergeメソッドではなく、ライブラリ全体をロードします。
alexKhymenko 2017年

4

他の誰かがこの問題に遭遇し、「重複した識別子」の問題のために上記の解決策のいずれも機能しない場合は、これを実行します。

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それでも問題が解決しない場合は、typingsフォルダを削除して実行してください。


4

これにより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後で使用できるようにすることです。


3

タイプlodash-esも作成したので、実際に次のことができます

インストール

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

使用法

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

ロールアップを使用する場合は、lodash適切にツリーシェイクされるため、の代わりにこれを使用することをお勧めします。


3

lodashからの部分的なインポートは、次の表記を使用して角度4.1.x機能するはずです。

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

または、「lodash-es」を使用してモジュールにインポートします。

import { assign } from 'lodash-es';

import { assign } from 'lodash-es';ライブラリ全体をまだインポートしているようです(バンドルサイズで判断)
ihorbond

2

を介してインストールしnpmます。

$ npm install lodash --save

今、importファイルで:

$ import * as _ from 'lodash';

ENV:

Angular CLI:1.6.6
ノード:6.11.2
OS:darwin x64
Angular:5.2.2
typescript:2.4.2
webpack:3.10.0


1
  1. lodashをインストールする

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

  1. index.htmlで、lodashのマップを追加します。

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

  1. .tsコードでlodashモジュールをインポートする

import _ from 'lodash';


エラーが発生します: $ typings install lodash --ambient --save typings ERR! message https://api.typings.org/entries/npm/lodash/versions/latest responded with 407, expected it to equal 200
kamayd

1

システムJSではなく、ng2をwebpackで使用しています。私に必要な手順は次のとおりです。

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

そして、アンダースコアをインポートしたいファイルで:

import * as _ from 'underscore';

1

経由typingsでのタイプの管理とtsdコマンドは、npm viaの使用を支持して、最終的には非推奨になっていnpm install @types/lodashます。

ただし、インポートステートメントで「モジュールが見つかりません」と長い間苦労しました。

import * as _ from 'lodash';

最終的に、Typescriptがバージョン2のnode_modules / @ types startバージョン2からのみタイプをロードすることに気付き、私のVsCode言語サービスはまだ1.8を使用していたため、エディターがエラーを報告していました。

VSCodeを使用している場合は、

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

VSCode settings.jsonファイル(ワークスペース設定用)で、typescriptバージョン> = 2.0.0がインストールされていることを確認してください npm install typescript@2.0.2 --save-dev

その後、私の編集者はimportステートメントについて文句を言わなくなります。


1

後でうまくいかない場合

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

あなたはこれを試してlodashをインポートします

typings install lodash --save


0

ターミナルを介してすべてをインストールします。

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'

7
tsdは非推奨になりました。タイピングを使用する必要があります
hhsadiq

1
タイピングは現在非推奨です。@typesを使用する必要があります
Luca Trazzi

0

私は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, ...

1
rxjs全体とlodashからのすべてをインポートする場合は、実際にダイヤルダウンする必要があります...
MTJ

0

それは奇妙すぎるかもしれませんが、最初にlodashを適切にインストールしたため(上記の提案によって再インストールされたため)、上記のどれも私を助けませんでした。

要するに、この問題はlodashの_.hasメソッドの使用に関連しています。

JS in演算子を使用するだけで修正しました。


-1

試す>> tsd install lodash --save


8
tsdは非推奨になりました。タイピングを使用する必要があります
hhsadiq

7
タイピングは現在非推奨です。@types ..を使用する必要があります。:)
harishr 2016年

12
私は別の非推奨コメントを待っています;)
Idrees Khan

非推奨は非推奨です。私を責めないでください。
あなた

-1

次のようにして、古き良き要件を介してインポートすることもできます。

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

これは私たちのために働いた唯一のものです。もちろん、require()呼び出しがインポートの後に来ることを確認してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.