typescript Angular2+टाइपस्क्रिप्ट आवेदन में lodash आयात




es6-module-loader (16)

मुझे लॉनाश मॉड्यूल आयात करने का प्रयास करने में कठिनाई हो रही है। मैंने एनपीएम + गल्प का उपयोग करके अपना प्रोजेक्ट सेटअप किया है, और उसी दीवार को मारते रहें। मैंने नियमित लॉनाश की कोशिश की है, लेकिन lodash-es भी।

Lodash npm पैकेज: (पैकेज रूट फ़ोल्डर में index.js फ़ाइल है)

import * as _ from 'lodash';    

का परिणाम:

error TS2307: Cannot find module 'lodash'.

Lodash-es npm पैकेज: (lodash.js में एक defaut निर्यात है मैं पैकेज रूट फ़ोल्डर)

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 में 'नोड' को आयात विवरणों को node_modules फ़ोल्डर में इंगित करना चाहिए, जहां lodash और lodash-es स्थापित हैं। मैंने आयात करने के कई अलग-अलग तरीकों का भी प्रयास किया है: पूर्ण पथ, सापेक्ष पथ, लेकिन कुछ भी काम नहीं करता है। कोई विचार?

यदि आवश्यक हो तो मैं समस्या को स्पष्ट करने के लिए एक छोटी ज़िप फ़ाइल प्रदान कर सकता हूं।


चरण 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: मैं अपने कोणीय 2 अनुप्रयोग में SystemJs मॉड्यूल लोडर का उपयोग कर रहा हूं। इसलिए मैं lodash को मैप करने के लिए 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: अब एनपीएम इंस्टॉल करें

चरण 4: अपनी फ़ाइल में lodash का उपयोग करने के लिए।

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

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:

कोणीय सीएलआई: 1.6.6
नोड: 6.11.2
ओएस: डार्विन x64
कोणीय: 5.2.2
टाइपस्क्रिप्ट: 2.4.2
वेबपैक: 3.10.0


मैं वेबपैक के साथ ng2 का उपयोग कर रहा हूं, सिस्टम जेएस नहीं। मेरे लिए कदमों की आवश्यकता थी:

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

और उसके बाद फ़ाइल में मैं अंडरस्कोर आयात करना चाहता हूं:

import * as _ from 'underscore';

मैंने निम्नलिखित प्रोजेक्ट्स के साथ अपने प्रोजेक्ट में सफलतापूर्वक लॉन्श आयात किया:

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

फिर मैंने इसे निम्न तरीके से आयात किया:

import * as _ from 'lodash';

और systemjs.config.js में मैंने इसे परिभाषित किया है:

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


मैं preboot/angular-webpack का उपयोग कर कोणीय 4.0.0 पर हूं, और थोड़ा अलग मार्ग जाना था।

@Taytay द्वारा प्रदान किया गया समाधान ज्यादातर मेरे लिए काम करता है:

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

और किसी दिए गए .component.ts फ़ाइल में फ़ंक्शंस का उपयोग करके:

import * as _ from "lodash";

यह काम करता है क्योंकि कोई "डिफ़ॉल्ट" निर्यातित कक्षा नहीं है। मेरा अंतर यह था कि मुझे तीसरे पक्ष के पुस्तकालयों में लोड करने के लिए प्रदान किया गया तरीका ढूंढने की आवश्यकता थी: विक्रेताओं। जो यहां बैठे थे:

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

टर्मिनल के माध्यम से सभी स्थापित करें:

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'

typings और tsd कमांड के माध्यम से प्रबंधित प्रकार अंततः npm install @types/lodash माध्यम से npm install @types/lodash का उपयोग करने के पक्ष में बहिष्कृत किया npm install @types/lodash

हालांकि, मैं लंबे समय तक आयात विवरण में "मॉड्यूल lodash नहीं मिल सकता" के साथ संघर्ष किया:

import * as _ from 'lodash';

आखिर में मुझे एहसास हुआ कि टाइपस्क्रिप्ट केवल नोड_मोड्यूल / @ प्रकारों से संस्करण 2 लोड करने के प्रकार लोड करेगा, और मेरी वीएसकोड भाषा सेवा अभी भी 1.8 का उपयोग कर रही थी, इसलिए संपादक त्रुटियों की रिपोर्ट कर रहा था।

यदि आप वीएससीओडी का उपयोग कर रहे हैं तो आप शामिल करना चाहेंगे

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

अपनी वीएससीओडी सेटिंग्स.जेसन फ़ाइल (वर्कस्पेस सेटिंग्स के लिए) में और सुनिश्चित करें कि आपके पास टाइपस्क्रिप्ट संस्करण> = 2.0.0 npm install [email protected] --save-dev माध्यम से npm install [email protected] --save-dev

उसके बाद मेरा संपादक आयात विवरण के बारे में शिकायत नहीं करेगा।


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


चूंकि टाइपस्क्रिप्ट 2.0, @types npm मॉड्यूल का उपयोग टाइपिंग आयात करने के लिए किया जाता है।

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

# Typescript Description
$ npm install --save @types/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

पीएस: उपर्युक्त लेख बिल्ड समय में सुधार और ऐप आकार को कम करने पर एक दिलचस्प पठन है


यदि कोई और इस समस्या में चलता है और उपरोक्त समाधानों में से कोई भी "डुप्लिकेट पहचानकर्ता" मुद्दों के कारण काम नहीं करता है, तो इसे चलाएं:

npm install typings --global

टाइपिंग के पुराने संस्करणों के साथ चीजें गड़बड़ हो जाती हैं और आपको "डुप्लिकेट पहचानकर्ता" मुद्दों का एक समूह मिल जाएगा। जहां तक ​​मैं कह सकता हूं, अब भी आपको --ambient का उपयोग करने की आवश्यकता नहीं है।

तो एक बार टाइपिंग अद्यतित हो जाने पर, यह काम करना चाहिए (कोणीय 2 क्विकस्टार्ट का उपयोग करके)।

चलाएँ:

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

सबसे पहले, systemjs.config.js में इसे जोड़ें:

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

अब आप इसे किसी भी फाइल में उपयोग कर सकते हैं: import * as _ from 'lodash';

यदि आप अभी भी समस्याएं हैं तो अपने टाइपिंग फ़ोल्डर को हटाएं और npm install


मैंने lodash-es लिए 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 क्योंकि इसे ठीक से ट्रेशक किया जाएगा।


एक और सुरुचिपूर्ण समाधान केवल आपको प्राप्त करने के लिए है, सभी lodash आयात नहीं

import {forEach,merge} from "lodash";

और फिर इसे अपने कोड में उपयोग करें

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

कृपया ध्यान दें कि npm install --save आपके ऐप को उत्पादन कोड में जो भी निर्भरता npm install --save करेगा, उसे बढ़ावा देगा।
"टाइपिंग" के लिए, यह केवल टाइपस्क्रिप्ट द्वारा आवश्यक है, जिसे अंततः जावास्क्रिप्ट में पारदर्शी किया जाता है। इसलिए, आप शायद उन्हें उत्पादन कोड में नहीं रखना चाहते हैं। मैं इसे प्रयोग करके, अपने प्रोजेक्ट की devDependencies

npm install --save-dev @types/lodash

या

npm install -D @types/lodash

(उदाहरण के लिए आकाश पोस्ट देखें)। वैसे, यह एनजी 2 ट्यूटो में किया गया है।

वैकल्पिक रूप से, यहां बताया गया है कि आपका पैकेज.जेसन कैसा दिख सकता है:

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


26 सितंबर, 2016 को अपडेट करें:

जैसा कि @ Taytay का जवाब कहता है, 'टाइपिंग' प्रतिष्ठानों के बजाय हमने कुछ महीने पहले उपयोग किया था, अब हम इसका उपयोग कर सकते हैं:

npm install --save @types/lodash

यहां दिए गए कुछ अतिरिक्त संदर्भ दिए गए हैं:

यदि अभी भी टाइपिंग इंस्टॉलेशन का उपयोग कर रहे हैं, तो '''ambient '' 'और' ''global' 'के संबंध में नीचे दी गई टिप्पणियां (दूसरों द्वारा) देखें।

साथ ही, नए क्विक स्टार्ट में, config index.html में नहीं है; यह अब systemjs.config.ts में है (यदि सिस्टमजेएस का उपयोग कर रहा है)।

मूल उत्तर:

यह मेरे मैक पर काम करता है ( त्वरित प्रारंभ के अनुसार कोणीय 2 स्थापित करने के बाद):

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

आपको प्रभावित विभिन्न फाइलें मिलेंगी, उदाहरण के लिए

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

कोणीय 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 के मध्य से संपादन:

जैसा कि @ टिबस ने उल्लेख किया है, कुछ संदर्भों में, आपको इसकी आवश्यकता है:

import * as _ from 'lodash';

यदि angular2-seed से शुरू होता है, और यदि आप हर बार आयात नहीं करना चाहते हैं, तो आप मानचित्र को छोड़ सकते हैं और चरणों को आयात कर सकते हैं और टूल / कॉन्फ़िगर / project.config.ts में लॉनाश लाइन को केवल असम्बद्ध कर सकते हैं।

लॉनाश के साथ काम करने के लिए मेरे परीक्षण प्राप्त करने के लिए, मुझे karma.conf.js में फ़ाइलों सरणी में एक पंक्ति भी जोड़नी पड़ी:

'node_modules/lodash/lodash.js',

अगर काम नहीं किया जाता है

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

आप इसे आजमाएं और लोनाश आयात करें

typings install lodash --save




es6-module-loader