javascript - कोणीय 2+टाइपस्क्रिप्ट अनुप्रयोग में दर्ज करना




angular typescript (15)

पहली चीजें पहले

npm install --save lodash

npm install -D @types/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)
...

या विशिष्ट lodash functionality import :

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

ध्यान दें - syntax में आवश्यक अंतर * as है

संदर्भ:

शुभ लाभ।

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

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

import * as _ from 'lodash';    

का परिणाम:

error TS2307: Cannot find module 'lodash'.

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

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

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


  1. दर्ज करें

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

  1. Index.html में, दर्ज करने के लिए मानचित्र जोड़ें:

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

  1. .Ts कोड आयात लॉश मॉड्यूल

import _ from 'lodash';


अगर बाद में काम नहीं किया

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

आप यह कोशिश करते हैं और लॉश आयात करते हैं

typings install lodash --save

आप अच्छी पुरानी आवश्यकता के माध्यम से भी आगे बढ़ सकते हैं और आयात कर सकते हैं, अर्थात:

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

यह केवल एक चीज है जो हमारे लिए काम करती है। बेशक, सुनिश्चित करें कि किसी भी आवश्यकता () कॉल आयात के बाद आती हैं।


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

npm install --save-dev @types/lodash

या

npm install -D @types/lodash

(उदाहरण के लिए आकाश पोस्ट देखें)। वैसे, यह जिस तरह से यह ng2 tuto में किया जाता है।

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

{
    "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 install --save बारे में अच्छी बात यह है कि आप बस एक npm install --save करके शुरू कर सकते हैं - npm install --save या --save-dev यदि आप उस निर्भरता के नवीनतम उपलब्ध संस्करण के बारे में निश्चित नहीं हैं जो आप देख रहे हैं, और यह स्वतः ही इसके लिए सेट हो जाएगा आप आगे के उपयोग के लिए अपने package.json


चरण 1: निर्भरता में दर्ज करने के लिए 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 मॉड्यूल लोडर का उपयोग कर रहा हूं। तो मैं 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 स्थापित करें

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

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

निम्नलिखित संकेतन का उपयोग कर लॉज से आंशिक आयात कोणीय 4.1.x में काम करना चाहिए:

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

या मॉड्यूल में 'लॉश-एसस' और आयात का उपयोग करें:

import { assign } from 'lodash-es';

मुझे बिल्कुल वैसी ही समस्या थी, लेकिन एक Angular2 ऐप में, और यह लेख बस इसे हल https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli : https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

लेख का सारांश:

  1. लाइब्रेरी npm install lodash --save
  2. Lodash tsd install underscore लिए टाइपस्क्रिप्ट परिभाषाएँ जोड़ें 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'; करना import * as _ from 'lodash';

मुझे उम्मीद है कि यह आपके मामले के लिए भी उपयोगी हो सकता है


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

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

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

import * as _ from 'underscore';

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


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

npm install typings --global

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

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

चलाएँ:

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

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

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

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

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


यह टाइपस्क्रिप्ट 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";

मैं सकारात्मक नहीं हूं कि अंतर क्या है। हम पहले सिंटैक्स का उपयोग करते हैं और पसंद करते हैं। हालांकि, कुछ रिपोर्ट है कि पहला सिंटैक्स उनके लिए काम नहीं करता है, और किसी और ने टिप्पणी की है कि बाद वाला सिंटैक्स आलसी लोडेड वेबपैक मॉड्यूल के साथ असंगत है। YMMV।

27 फरवरी, 2017 को संपादित करें:

नीचे @Koert के अनुसार, import * as _ from "lodash"; टाइपस्क्रिप्ट 2.2.1, लॉश 4.17.4, और @ टाइप / लॉश 4.14.53 के रूप में एकमात्र कार्य सिंटैक्स है। उनका कहना है कि अन्य सुझाया गया आयात वाक्य-विन्यास त्रुटि देता है "कोई डिफ़ॉल्ट निर्यात नहीं है"।


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

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 फ़ाइल के शीर्ष पर आयात दर्ज करें

import * as _ from 'lodash'

npm माध्यम से स्थापित करें।

$ npm install lodash --save

अब, फ़ाइल में import करें:

$ import * as _ from 'lodash';

ENV:

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


अद्यतन 26 सितंबर, 2016:

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

npm install --save @types/lodash

उस उत्तर का समर्थन करने वाले कुछ अतिरिक्त संदर्भ यहां दिए गए हैं:

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

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

मूल उत्तर:

इसने मेरे मैक पर काम किया ( क्विक स्टार्ट के अनुसार कोणीय 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 में config में 'मैप' को इस प्रकार जोड़ा:

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 से शुरू किया angular2-seed , और यदि आप हर बार आयात नहीं करना चाहते हैं, तो आप नक्शे को छोड़ सकते हैं और चरणों को आयात कर सकते हैं और उपकरण / config / project.config.ts में लॉश लाइन को अनप्लग कर सकते हैं।

मेरे परीक्षणों को दर्ज करने के लिए, मुझे कर्मों में फ़ाइलों की सरणी में एक पंक्ति भी जोड़नी थी।

'node_modules/lodash/lodash.js',






es6-module-loader