การนำเข้า lodash ไปยังแอปพลิเคชัน angular2 + typescript


262

ฉันมีปัญหาในการพยายามนำโมดูล lodash ที่นำเข้ามา ฉันตั้งค่าโครงการของฉันโดยใช้ npm + gulp และกดไปที่กำแพงเดิมต่อไป ฉันเคยลองไส้เดือนธรรมดา แต่ก็พยายามพักด้วยเช่นกัน

แพ็คเกจ lodash npm: (มีไฟล์ index.js ในโฟลเดอร์ root ของแพ็คเกจ)

import * as _ from 'lodash';    

ผลลัพธ์ใน:

error TS2307: Cannot find module 'lodash'.

แพคเกจ lodash-es npm: (มีการส่งออก defaut ใน lodash.js ฉันเป็นโฟลเดอร์รากของแพคเกจ)

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

ผลลัพธ์ใน:

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

ทั้งงานอึกและ 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']);

หากฉันเข้าใจอย่างถูกต้อง moduleResolution: 'node' ใน tsconfig ของฉันควรชี้คำสั่งการนำเข้าไปยังโฟลเดอร์ node_modules ที่ติดตั้ง lodash และ lodash-es ฉันได้ลองวิธีการนำเข้าหลายวิธีด้วยกัน: เส้นทางสัมบูรณ์เส้นทางสัมพัทธ์ ความคิดใด ๆ

หากจำเป็นฉันสามารถให้ไฟล์ zip ขนาดเล็กเพื่อแสดงปัญหา


1
ฉันพบปัญหานี้เช่นกัน ไลบรารี lodash ไม่มีคำจำกัดความ typecript รวมอยู่ในรูปแบบโมดูลาร์ดังนั้นข้อความสั่งการนำเข้าไม่ทำงาน สิ่งเดียวที่แก้ไขได้ในตอนนี้ดูเหมือนว่าเป็นการอ้างอิงสคริปต์ไปยัง lodash ในไฟล์ index.html ของคุณจากนั้นอ้างอิง lodash.d.ts ในไฟล์ typescript ของคุณ หวังว่าจะมีการแก้ไขในไม่ช้า หากมีการแก้ไขอื่นสำหรับเรื่องนี้ฉันต้องการจะได้ยินมัน
brando

1
ไฟล์ zip จะยอดเยี่ยม แต่ดูเหมือนว่าคุณไม่ได้ใช้ตัวโหลดโมดูลใด ๆ (เช่น jspm หรือ webpack) คุณโหลดแองกูลาร์ผ่านแท็กสคริปต์ได้อย่างไร ดีกว่าโพสต์ html เช่นกัน ฉันขอแนะนำให้คุณใช้ webpack เป็นตัวโหลดโมดูลดูตัวอย่าง -> github.com/jhades/angular2-library-example/tree/master/examples/ …และนี่เป็นตัวเริ่มต้นที่น้อยที่สุด -> github.com/jhades/ng2- webpack-minimal
Angular University


1
ฉันลงเอยด้วยการเพิ่มสิ่งนี้ลงในไฟล์เมล ts ของฉัน: /// <reference path = "../ typings / tsd.d.ts" />
เดวี่

ณ วันนี้ไม่มีงานใด ๆ ข้างต้น ฉันกำลังใช้สแต็ก 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

แก้ไขเมื่อวันที่ 27 กุมภาพันธ์ 2017:

ตามที่ @Koert ด้านล่างimport * as _ from "lodash";เป็นไวยากรณ์การทำงานเพียงอย่างเดียวของ Typescript 2.2.1, lodash 4.17.4 และ @ types / lodash 4.14.53 เขาบอกว่าไวยากรณ์การนำเข้าอื่น ๆ ที่แนะนำให้ข้อผิดพลาด "ไม่มีการส่งออกเริ่มต้น"


7
typescript 2.0.3ผมสามารถยืนยันได้ว่าการทำงานนี้เมื่อใช้ อันที่จริงการลบtypingsในความโปรดปรานของ@typesแพคเกจ NPM มากสะอาด
Adrian Moisa

8
import * as _ from "lodash";ไม่ได้ทำงานสำหรับฉัน แต่import _ from "lodash";ทำ
Gabe O'Leary

5
คำเตือนฉันพบว่าimport _ from "lodash"ไวยากรณ์ไม่เข้ากันกับโมดูลเว็บแพ็คที่โหลดอย่างขี้เกียจ ไม่แน่ใจว่าทำไมฉันไม่ได้ตรวจสอบอย่างละเอียด
Tom Makin

6
นำเข้า _ จาก "lodash"; ไม่ทำงานอีกต่อไปใน 2.0 คุณต้องใช้การนำเข้า * เป็น _ จาก "lodash";
Roger Far

6
ควรใช้เฉพาะในการพัฒนาไม่ใช่การผลิตดังนั้นให้ใช้ save-dev: npm install --save-dev @types/lodash หากคุณเห็นปัญหาแปลก ๆ และข้อบกพร่องลองสิ่งนี้: npm install --save-dev @types/lodash@4.14.50
leetheguy

64

อัปเดต 26 กันยายน 2559:

ดังที่คำตอบของ @ Taytay บอกว่าแทนที่จะติดตั้ง 'typings' ที่เราใช้เมื่อไม่กี่เดือนที่ผ่านมาเราสามารถใช้:

npm install --save @types/lodash

นี่คือบางส่วนอ้างอิงเพิ่มเติมที่สนับสนุนคำตอบนั้น:

หากยังคงใช้การติดตั้งการพิมพ์โปรดดูความคิดเห็นด้านล่าง (โดยคนอื่น ๆ ) เกี่ยวกับ '' --ambient '' 'และ' '' --global '' '

นอกจากนี้ใน Quick Start ใหม่การกำหนดค่าไม่อยู่ใน index.html อีกต่อไป ตอนนี้อยู่ใน systemjs.config.ts (หากใช้ SystemJS)

คำตอบเดิม:

สิ่งนี้ใช้ได้กับ mac ของฉัน (หลังจากติดตั้ง Angular 2 ตามQuick Start ):

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

คุณจะพบไฟล์ต่างๆที่ได้รับผลกระทบเช่น

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

Angular 2 Quickstart ใช้ System.js ดังนั้นฉันจึงเพิ่ม 'map' ลงใน config ใน 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);

การแก้ไขตั้งแต่กลางปี ​​2559:

ตามที่ @tibbus กล่าวถึงในบางบริบทคุณต้อง:

import * as _ from 'lodash';

หากเริ่มต้นจากangular2-seedและหากคุณไม่ต้องการนำเข้าทุกครั้งคุณสามารถข้ามแผนที่และนำเข้าขั้นตอนและยกเลิกการใส่เครื่องหมายบรรทัด Lodash ใน tools / config / project.config.ts

เพื่อให้การทดสอบของฉันทำงานกับ lodash ฉันต้องเพิ่มบรรทัดลงในอาร์เรย์ไฟล์ใน karma.conf.js:

'node_modules/lodash/lodash.js',

ฉันเห็นว่าสิ่งนี้จะช่วยแก้ไขปัญหาของ TypeScript ของฉัน แต่การโหลดหน้าเว็บในเบราว์เซอร์ฉันยังเห็นข้อผิดพลาดที่ไม่สามารถหาโมดูล lodash ได้ ดูเหมือนว่าจะทำการร้องขอ xhr ที่ล้มเหลวเป็น '/ lodash' แทน node_modules
แซค

1
@ แซคคุณคิดถึง อะไรmap: { lodash: 'node_modules/lodash/lodash.js' } ในSystem.config?
xwb1989

5
สำหรับฉันมันใช้ได้เฉพาะกับการนำเข้า * เป็น _ จาก 'lodash';
tibbus

1
... และทำไมเราต้องเขียนimport * as _ from 'lodash'แทนimport _ from 'lodash'?
smartmouse

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

@Toolkit ขอบคุณสำหรับการชี้ให้เห็น ฉันได้อัพเดตคำตอบแล้ว โปรดตรวจสอบว่าโซลูชันนี้ใช้งานได้และทำเครื่องหมายอย่างเหมาะสมหรือไม่
Akash

2
import debounce from 'lodash/debounce'ให้ผลTS1192: Module node_modules/@types/lodash/debounce has no default exportเมื่อ"allowSyntheticDefaultImports": false
kross

1
ฉันยืนตามความคิดเห็นก่อนหน้าของฉัน ขณะนี้ไม่มีการส่งออกเริ่มต้นในไฟล์ประเภทดังนั้นจึงไม่สามารถใช้ได้กับ allowSyntheticDefaultImports false
kross

1
@kross โปรดทราบว่าการเพิ่ม"allowSyntheticDefaultImports": trueตัวเลือกคอมไพเลอร์ในไฟล์ tsconfig.json ของคุณอาจจำเป็นเพื่อหลีกเลี่ยงข้อผิดพลาด
Akash

24

ขั้นตอนที่ 1: แก้ไขไฟล์ package.json เพื่อรวม lodash ในการอ้างอิง

  "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: ฉันกำลังใช้ตัวโหลดโมดูล SystemJs ในแอปพลิเคชัน angular2 ของฉัน ดังนั้นฉันจะแก้ไขไฟล์ systemjs.config.js เพื่อแม็พ 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);

ขั้นตอนที่ 3: ตอนนี้ทำการติดตั้ง npm

ขั้นตอนที่ 4: การใช้ lodash ในไฟล์ของคุณ

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

โซลูชันของคุณดูแลการพิมพ์ของ TypeScript อย่างไร แพ็คเกจ npm lodash ดูเหมือนจะไม่รวมไฟล์. d.ts
Vitali Kniazeu

13

ตั้งแต่ Typescript 2.0 จะใช้โมดูล @types npm เพื่อนำเข้าการพิมพ์

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

# Typescript Description
$ npm install --save @types/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 : ไม่มีไฟล์หรือไดเรกทอรีดังกล่าวเปิด '/ ทดลอง \ au-proj \ node_modules \ lodash \ lodash \ kebabCase.js '
Stephen 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-lไลบรารี-with-angular-2-87e06db8e5d1#.p6gra5eli

บทสรุปของบทความ:

  1. การติดตั้ง Library npm install lodash --save
  2. เพิ่มคำจำกัดความของ TypeScript สำหรับ Lodash 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

@ Pian0_M4n อาจจะทำผิด แต่ได้ลองกับการเขย่าต้นไม้เชิงมุม 1.4.4 ไม่ได้ผล
alexKhymenko

@alexKhymenko คุณสามารถโพสต์ข้อผิดพลาดได้หรือไม่ มันเชื่อมต่อกับ lodash หรือไม่?
Pian0_M4n

@ Pian0_M4n ไม่มีข้อผิดพลาดไม่มีการสั่นไหวของต้นไม้ มันโหลดทั้งห้องสมุดไม่ได้สำหรับแต่ละวิธีและผสาน
alexKhymenko

4

หากบุคคลอื่นพบปัญหานี้และไม่มีวิธีการแก้ปัญหาใด ๆ ข้างต้นทำงานได้เนื่องจากปัญหา "ตัวระบุซ้ำ" ให้เรียกใช้สิ่งนี้:

npm install typings --global

ด้วยเวอร์ชันที่เก่ากว่าของสิ่งที่พิมพ์สับสนและคุณจะได้รับปัญหา "ตัวระบุซ้ำ" จำนวนมาก นอกจากนี้คุณไม่จำเป็นต้องใช้--ambientอีกต่อไปเท่าที่ฉันจะบอกได้

ดังนั้นเมื่อการพิมพ์เป็นปัจจุบันควรใช้งานได้ (โดยใช้ Angstart 2 quickstart)

วิ่ง:

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

โปรดทราบว่าnpm install --saveจะส่งเสริมการพึ่งพาแอปของคุณในรหัสการผลิต
สำหรับ "typings" มันเป็นสิ่งจำเป็นโดย TypeScript ซึ่งในที่สุดก็จะถูกแปลงใน JavaScript ดังนั้นคุณอาจไม่ต้องการให้มีในรหัสการผลิต ฉันแนะนำให้ใส่ไว้ในโครงการของคุณdevDependenciesแทนโดยใช้

npm install --save-dev @types/lodash

หรือ

npm install -D @types/lodash

(ดูตัวอย่างจาก Akash post) โดยวิธีการมันเป็นวิธีที่จะทำใน 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เพราะมันจะถูก treeshaken อย่างถูกต้อง


3

การนำเข้าบางส่วนจากLodashควรทำงานในเชิงมุม 4.1.xโดยใช้สัญลักษณ์ต่อไปนี้:

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

หรือใช้ 'lodash-es' และนำเข้าในโมดูล:

import { assign } from 'lodash-es';

import { assign } from 'lodash-es';ดูเหมือนว่าจะยังคงนำเข้าห้องสมุดทั้งหมด (พิจารณาจากขนาดของชุดข้อมูล)
38719

2

npmติดตั้งผ่านทาง

$ npm install lodash --save

ตอนนี้importในไฟล์:

$ import * as _ from 'lodash';

ENV:

CLI เชิงมุม: 1.6.6
โหนด: 6.11.2
ระบบปฏิบัติการ: darwin x64
เชิงมุม: 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. ในโมดูล. นำเข้า lodys รหัส

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

ฉันใช้ ng2 กับ webpack ไม่ใช่ระบบ JS ขั้นตอนที่จำเป็นสำหรับฉันคือ:

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

จากนั้นในไฟล์ที่ฉันต้องการนำเข้าขีดล่าง:

import * as _ from 'underscore';

1

การจัดการประเภทผ่านtypingsและtsdคำสั่งในที่สุดเลิกใช้ในการใช้ npm ผ่านnpm install @types/lodashผ่าน

อย่างไรก็ตามฉันต่อสู้กับ "ไม่สามารถหาโมดูลบ้านพัก" ในคำสั่งนำเข้าเป็นเวลานาน:

import * as _ from 'lodash';

ในที่สุดฉันก็รู้ว่า typescript จะโหลดเฉพาะประเภทจาก node_modules / @ type เริ่มต้นเวอร์ชัน 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

หลังจากนั้นตัวแก้ไขของฉันจะไม่บ่นเกี่ยวกับคำสั่งการนำเข้า


1

หาก dosen't ทำงานหลังจาก

$ 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>

นำเข้า lodash ที่ด้านบนของไฟล์. ts

import * as _ from 'lodash'

7
tsd เลิกใช้แล้วในขณะนี้ คุณควรใช้การพิมพ์
hhsadiq

1
เลิกพิมพ์แล้วในขณะนี้ คุณควรใช้ @types
Luca Trazzi

0

ฉันใช้งาน Angular 4.0.0 โดยใช้preboot / angular-webpackและต้องใช้เส้นทางที่แตกต่างกันเล็กน้อย

วิธีการแก้ปัญหาโดย @Taytay ส่วนใหญ่ทำงานให้ฉัน:

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

และนำเข้าฟังก์ชั่นเป็นไฟล์. component.ts ที่กำหนดโดยใช้:

import * as _ from "lodash";

ใช้งานได้เนื่องจากไม่มีคลาสส่งออก "เริ่มต้น" ความแตกต่างของฉันคือฉันจำเป็นต้องค้นหาวิธีการที่ให้ไว้เพื่อโหลดในห้องสมุดบุคคลที่สาม: seller.tsซึ่งนั่งที่:

src/vendor.ts

ไฟล์seller.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 อย่างถูกต้อง (ติดตั้งอีกครั้งผ่านคำแนะนำด้านบน)

เรื่องสั้นยาวเรื่องนี้เกี่ยวข้องกับการใช้_.hasวิธีการจากlodash lodash

ฉันแก้ไขโดยใช้inตัวดำเนินการJS


-1

ลอง >> tsd install lodash --save


8
tsd เลิกใช้แล้วในขณะนี้ คุณควรใช้การพิมพ์
hhsadiq

7
เลิกพิมพ์แล้วในขณะนี้ คุณควรใช้ @types .. :)
harishr

12
ฉันกำลังรอความคิดเห็นคัดค้านอีก;)
Idrees Khan

เลิกใช้แล้วเลิกใช้แล้ว ไม่โทษฉัน คุณขอหนึ่ง ;-)
sarora

-1

นอกจากนี้คุณยังสามารถไปข้างหน้าและนำเข้าผ่านความต้องการเก่าที่ดีเช่น:

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

นี่เป็นสิ่งเดียวที่ทำงานให้เรา แน่นอนตรวจสอบให้แน่ใจว่ามีการเรียก () ที่ต้องมาหลังจากการนำเข้า

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.