web-dev-qa-db-ja.com

LodashをAngular 2 + TypeScriptアプリケーションにインポートする

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 iパッケージのルートフォルダーにデフォルトのエクスポートがあります）

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フォルダを指すべきです。絶対パス、相対パスなど、さまざまな方法でインポートすることも試みましたが、うまくいかないようです。何か案は？

必要に応じて私は問題を説明するために小さなZipファイルを提供することができます。

javascriptangulartypescriptlodashes6-module-loader
224
Davy

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の時点で唯一有効な構文です。彼は、他の推奨されているインポート構文は「デフォルトのエクスポートがありません」というエラーを出すと言っています。

384
Taytay

2016年9月26日に更新：

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

npm install --save @types/lodash

その答えを裏付ける追加の参考文献があります。

まだtypingsインストールを使用している場合は、 ' - ' - 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';

angular2-seed から開始し、毎回インポートしたくない場合は、マップとインポートの手順をスキップして、tools/config/project.config.tsのlodash行をコメント解除するだけで済みます。

私のテストがlodashで動くようにするために、私はまたkarma.conf.jsのファイル配列に行を追加しなければなりませんでした：

'node_modules/lodash/lodash.js',
61
Marcus

ステップ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：私はAngular 2アプリケーションでSystemJsモジュールローダを使用しています。そのため、system ls.ashをマップするように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);
24
Vi137

まず最初に

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

_ note _ - syntaxでは* asという違いは必要ありません

参考文献：

enter image description here

がんばろう。

23
Akash

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

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

13
Dhruvan Ganesh

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

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

それから私は以下の方法でそれをインポートしました：

import * as _ from 'lodash';

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

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

10
smartmouse

もう一つの優雅な解決策はあなたが必要なものだけを手に入れることであり、すべてのlodashをインポートすることではありません。

import {forEach,merge} from "lodash";

そしてそれをあなたのコードで使う

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

私は全く同じ問題を抱えていましたが、Angular 2アプリで、この記事はそれを解決します： 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’;のインポート

私はそれがあなたのケースにも役立つことを願って

7
maufarinelli

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

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

問題が解決しない場合は、typingsフォルダを削除してnpm installを実行してください。

4
Bart

npm install --saveはあなたのアプリがプロダクションコードに要求するどんな依存性も育てることに注意してください。
「タイピング」に関しては、最終的にはJavaScriptに変換されるTypeScriptによってのみ必要とされます。したがって、あなたはおそらくそれらをプロダクションコードに入れたくないでしょう。代わりに、あなたのプロジェクトの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に設定されます。

4
avi.elkharrat

lodash からの部分インポートは、 角度4.1.x で動作します。

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

または 'lodash-es'を使用してモジュールにインポートする：

import { assign } from 'lodash-es';
3
Alex Dzeiko

私も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
Stephen Lautier

npmからインストールしてください。

$ npm install lodash --save

今、ファイル内のimport：

$ import * as _ from 'lodash';

ENV：

Angular CLI：1.6.6
ノード：6.11.2
OS：ダーウィンx 64
角：5.2.2
TypeScript：2.4.2
ウェブパック：3.10.0

2
Sajib Khan

服用しなかった場合

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

これを試してlodashをインポートする

typings install lodash --save
1
Ahmet Deveci
  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';

1
user3437231

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

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

それから私はアンダースコアをインポートしたいファイルの中で：

import * as _ from 'underscore';
1
FrontEndFire

typingsおよびtsdコマンドを使用して型を管理することは、npm install @types/lodashを介してnpmを使用することになるため、最終的には推奨されません。

しかし、私は長い間import文の中に "module lodashが見つかりません"と苦労しました：

import * as _ from 'lodash';

結局のところ、TypeScriptはnode_modules/@ typesバージョン2以降の型のみをロードすることに気付きました。そして私のVsCode言語サービスはまだ1.8を使っていたので、エディタはエラーを報告していました。

VSCodeを使用している場合は含める必要があります。

"TypeScript.tsdk":  "node_modules/TypeScript/lib"

vSCodeのsettings.jsonファイル（ワークスペースの設定用）に、TypeScriptバージョン2.0.0以降がnpm install [email protected] --save-devでインストールされていることを確認します。

その後、私の編集者はimport文について文句を言わないでしょう。

1
parliament

私はAngular 4.0.0を使い、 preboot/angular-webpack を使っていますが、やや異なるルートを使用しなければなりませんでした。

@Taytayによって提供された解決策は、ほとんど私のために働きました：

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

次のようにして、関数を与えられた .component.ts ファイルにインポートします。

import * as _ from "lodash";

「デフォルト」のエクスポートクラスがないため、これは機能します。私の違いは、私がサードパーティのライブラリにロードするために提供された方法を見つける必要があるということでした： vendor.ts 

src/vendor.ts

My 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, ...
0
Guentersniden

端末をすべてインストールします。

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'
0
Milan Milanovic

奇妙なことかもしれませんが、lodashを正しくインストールしていたため（上記の提案を介して再インストールしたため）、上記のいずれも助けにはなりませんでした。

長い話をまとめると、この問題は lodash の_.hasメソッドを使用することに関連していました。

私は単純にJSのin演算子を使って修正しました。

0
Arsen Khachaturyan