Mam problem z importem modułów lodash. Skonfigurowałem swój projekt za pomocą npm + gulp i wciąż uderzam w tę samą ścianę. Próbowałem zwykłego lodash, ale także lodash-es.

Pakiet Lodash npm: (ma plik index.js w folderze głównym pakietu)

import * as _ from 'lodash';    

Prowadzi do:

error TS2307: Cannot find module 'lodash'.

Pakiet lodash-es npm: (ma defaut eksport w lodash.js w folderze głównym pakietu)

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

Prowadzi do:

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

Zarówno zadanie przełykania, jak i burza zgłaszają ten sam problem.

Zabawny fakt, że nie zwraca błędu:

import 'lodash-es/lodash';

... ale oczywiście nie ma „_”…

Mój plik tsconfig.json:

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

Mój plik 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']);

Jeśli dobrze rozumiem, modułResolution: 'node' w moim tsconfig powinien kierować instrukcje importu do folderu node_modules, w którym są zainstalowane lodash i lodash-es. Próbowałem też wielu różnych sposobów importowania: ścieżki bezwzględne, ścieżki względne, ale nic nie działa. Jakieś pomysły?

W razie potrzeby mogę dostarczyć mały plik zip, aby zilustrować problem.

Oto jak to zrobić od Typescript 2.0: (tsd i typowania są przestarzałe na rzecz następujących):

$ npm install --save lodash

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

Następnie w pliku .ts:

Zarówno:

import * as _ from "lodash";

Lub (zgodnie z sugestią @Naitik):

import _ from "lodash";

Nie jestem pewien, jaka jest różnica. Używamy i preferujemy pierwszą składnię. Jednak niektórzy twierdzą, że pierwsza składnia nie działa dla nich, a ktoś inny skomentował, że druga składnia jest niezgodna z modułami leniwie ładowanego pakietu webpack. YMMV.

Edytuj w dniu 27 lutego 2017 r .:

Według @Koert poniżej, import * as _ from "lodash";jest jedyną działającą składnią od Typescript 2.2.1, lodash 4.17.4 i @ types / lodash 4.14.53. Mówi, że druga sugerowana składnia importu daje błąd „nie ma domyślnego eksportu”.

Aktualizacja 26 września 2016 r .:

Jak mówi odpowiedź @ Taytaya, zamiast instalacji „typowania”, z których korzystaliśmy kilka miesięcy temu, możemy teraz użyć:

npm install --save @types/lodash

Oto kilka dodatkowych referencji potwierdzających tę odpowiedź:

• https://www.npmjs.com/package/@types/lodash
• Pisanie na maszynie TypeScript w pakietach org NPM @types org

Jeśli nadal korzystasz z instalacji do pisania, zobacz poniższe komentarze (przez innych) dotyczące „--ambient” „” i „- - globalny”.

Ponadto w nowym Szybki Start konfiguracji nie ma już w index.html; jest teraz w pliku systemjs.config.ts (jeśli używasz SystemJS).

Oryginalna odpowiedź:

To działało na moim Macu (po zainstalowaniu Angulara 2 zgodnie z Quick Start ):

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

Znajdziesz różne pliki, których to dotyczy, np

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

Angular 2 Quickstart używa System.js, więc dodałem „map” do konfiguracji w index.html w następujący sposób:

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

Następnie w moim kodzie .ts mogłem:

import _ from 'lodash';

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

Edycje od połowy 2016 r .:

Jak wspomina @tibbus, w niektórych kontekstach potrzebujesz:

import * as _ from 'lodash';

Jeśli zaczynasz od angular2-seed i jeśli nie chcesz zaimportować za każdym razem, możesz pominąć mapę i zaimportować kroki i po prostu odkomentować wiersz lodash w tools / config / project.config.ts.

Aby moje testy działały z lodash, musiałem również dodać wiersz do tablicy plików w karma.conf.js:

'node_modules/lodash/lodash.js',

Najpierw najważniejsze

npm install --save lodash

npm install -D @types/lodash

Załaduj pełną bibliotekę 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)

LUB ładuj tylko funkcje, z którymi będziemy pracować

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

UPDATE - March 2017

Obecnie pracuję z ES6 modules, a ostatnio mogłem pracować z 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)
...

LUB importspecyficzne lodash functionality:

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

UWAGA - różnica nie * asjest wymagana wsyntax

Bibliografia:

Powodzenia.

Krok 1: Zmodyfikuj plik package.json, aby uwzględnić lodash w zależnościach.

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

Krok 2: Korzystam z modułu ładującego SystemJs w mojej aplikacji angular2. Więc zmodyfikowałbym plik systemjs.config.js, aby zmapować lodash.

(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);

Krok 3: Teraz zainstaluj npm

Krok 4: Aby użyć lodash w pliku.

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

Od Typescript 2.0 moduły @types npm są używane do importowania typów.

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

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

Teraz, gdy udzielono odpowiedzi na to pytanie, zajmę się tym, jak skutecznie importować lodash

Bezpieczny sposób na zaimportowanie całej biblioteki (w main.ts)

import 'lodash';

Oto nowy bit tutaj:

Wdrażanie jaśniejszej laszówki z wymaganymi funkcjami

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

źródło: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PS: Powyższy artykuł stanowi interesującą lekturę na temat poprawy czasu kompilacji i zmniejszenia rozmiaru aplikacji

Pomyślnie zaimportowałem lodash do mojego projektu za pomocą następujących poleceń:

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

Następnie zaimportowałem go w następujący sposób:

import * as _ from 'lodash';

i w systemjs.config.js zdefiniowałem to:

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

Miałem dokładnie ten sam problem, ale w aplikacji Angular2, a ten artykuł po prostu go rozwiązuje: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Podsumowanie artykułu:

1. Instalowanie biblioteki npm install lodash --save
2. Dodaj definicje TypeScript dla Lodash tsd install underscore
3. Łącznie ze skryptem <script src="node_modules/lodash/index.js"></script>
4. Konfigurowanie SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. Moduł importujący import * as _ from ‘lodash’;

Mam nadzieję, że może się przydać również w twoim przypadku

Innym eleganckim rozwiązaniem jest zdobycie tylko tego, czego potrzebujesz, a nie importowanie całej lodash

import {forEach,merge} from "lodash";

a następnie użyj go w kodzie

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

Jeśli ktoś napotka ten problem i żadne z powyższych rozwiązań nie działa z powodu problemów z „zduplikowanym identyfikatorem”, uruchom to:

npm install typings --global

W starszych wersjach pisania wszystko się psuje i pojawia się mnóstwo problemów z „zduplikowanym identyfikatorem”. Poza tym nie muszę --ambientjuż używać, o ile mogę powiedzieć.

Więc kiedy pisanie jest aktualne, powinno to działać (przy użyciu szybkiego startu Angular 2).

Biegać:

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

Najpierw dodaj to do systemjs.config.js:

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

Teraz możesz użyć tego w dowolnym pliku: import * as _ from 'lodash';

Usuń folder z typami i uruchom, npm installjeśli nadal masz problemy.

Pamiętaj, że npm install --savezwiększy to zależność od aplikacji wymaganą w kodzie produkcyjnym.
Jeśli chodzi o „typowanie”, jest ono wymagane tylko przez TypeScript, który ostatecznie jest transpilowany w JavaScript. Dlatego prawdopodobnie nie chcesz mieć ich w kodzie produkcyjnym. Sugeruję umieszczenie go w projekcie devDependencieszamiast za pomocą

npm install --save-dev @types/lodash

lub

npm install -D @types/lodash

(patrz na przykład post Akash). Nawiasem mówiąc, jest to sposób, w jaki odbywa się to w ng2 tuto.

Alternatywnie, oto jak może wyglądać twoja paczka.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"
    }
}

tylko wskazówka

Zaletą npmjest to, że możesz zacząć od zrobienia npm install --savelub --save-devjeśli nie masz pewności co do najnowszej dostępnej wersji zależności, której szukasz, i automatycznie ustawi ją dla Ciebie w package.jsoncelu dalszego wykorzystania.

Stworzyłem lodash-esrównież pisanie dla , więc teraz możesz właściwie wykonać następujące czynności

zainstalować

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

stosowanie

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

jeśli użyjesz rollupa, sugeruję użycie tego zamiast tego, lodashponieważ będzie to odpowiednio wstrząsnąć drzewem.

Częściowy import z lodash powinien działać w układzie kątowym 4.1.x, stosując następującą notację:

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

Lub użyj „lodash-es” i zaimportuj do modułu:

import { assign } from 'lodash-es';

Zainstaluj przez npm.

$ npm install lodash --save

Teraz importw pliku:

$ import * as _ from 'lodash';

ENV:

Angular CLI: 1.6.6
Węzeł: 6.11.2
OS: darwin x64
Angular: 5.2.2
maszynopis: 2.4.2
webpack: 3.10.0

1. Zainstaluj lodash

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

2. W index.html dodaj mapę do lodash:

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

3. W module .ts import kodu lodash

import _ from 'lodash';

Używam ng2 z webpack, a nie system JS. Potrzebne mi były następujące kroki:

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

a następnie w pliku chcę zaimportować podkreślenie do:

import * as _ from 'underscore';

Zarządzanie typami przez typingsi tsdpolecenia jest ostatecznie przestarzałe na korzyść używania npm przez npm install @types/lodash.

Długo jednak zmagałem się z „Nie można znaleźć modułu pseudonimu” w zestawieniu importu:

import * as _ from 'lodash';

W końcu zdałem sobie sprawę, że Typescript ładuje typy tylko z node_modules / @ types start version 2, a moja usługa VsCode Language wciąż używa 1.8, więc edytor zgłaszał błędy.

Jeśli używasz VSCode, chcesz dołączyć

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

w pliku VSCode settings.json (ustawienia obszaru roboczego) i upewnij się, że masz wersję na maszynie> = 2.0.0 zainstalowaną przez npm install typescript@2.0.2 --save-dev

Potem mój redaktor nie będzie narzekał na wyciąg z importu.

jeśli dawka nie działa później

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

spróbuj tego i zaimportuj lodash

typings install lodash --save

npm install --save @types/lodash

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

Zainstaluj wszystkie terminale:

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

Dodaj ścieżki w 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>

Zaimportuj lodash na górze pliku .ts

import * as _ from 'lodash'

Korzystam z Angular 4.0.0, używając preboot / angular-webpack , i musiałem wybrać nieco inną trasę.

Rozwiązanie dostarczone przez @Taytay działało głównie dla mnie:

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

i import funkcji do danego pliku .component.ts przy użyciu:

import * as _ from "lodash";

Działa to, ponieważ nie istnieje „domyślna” klasa eksportu. Różnica polegała na tym, że potrzebowałem znaleźć sposób na załadowanie do bibliotek stron trzecich: vendor.ts, który znajdował się w:

src/vendor.ts

Mój plik vendor.ts wygląda teraz tak:

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

Być może jest to zbyt dziwne, ale żadne z powyższych nie pomogło mi przede wszystkim, ponieważ poprawnie zainstalowałem lodash (również ponownie zainstalowany za pomocą powyższych sugestii).

Krótko mówiąc, kwestia ta związana była z zastosowaniem _.hasmetody z lodash .

Naprawiłem to, używając po prostu inoperatora JS .

spróbuj >> tsd install lodash --save

Możesz również przejść dalej i zaimportować za pomocą starych dobrych wymagań, tj .:

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

To jedyna rzecz, która działała dla nas. Oczywiście upewnij się, że wszelkie wywołania metody wymaganej () pochodzą po imporcie.