from javascript angular typescript lodash es6-module-loader

javascript - from - Importar lodash en la aplicación de mecanografía angular2+



use lodash in angular 4 (22)

Me está costando mucho tratar de importar los módulos lodash. He configurado mi proyecto usando npm + gulp, y sigo golpeando la misma pared. He probado el lodash normal, pero también lodash-es.

El paquete lodash npm: (tiene un archivo index.js en la carpeta raíz del paquete)

import * as _ from ''lodash'';

Resultados en:

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

El paquete lodash-es npm: (tiene una exportación predeterminada en lodash.js i la carpeta raíz del paquete)

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

Resultados en:

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

Tanto la tarea de Gulp como la tormenta web informan el mismo problema.

Dato curioso, esto no devuelve ningún error:

import ''lodash-es/lodash'';

... pero por supuesto no hay "_" ...

Mi archivo tsconfig.json:

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

Mi 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'']);

Si entiendo correctamente, moduleResolution: ''node'' en mi tsconfig debería apuntar las declaraciones de importación a la carpeta node_modules, donde están instalados lodash y lodash-es. También probé muchas formas diferentes de importar: rutas absolutas, rutas relativas, pero nada parece funcionar. ¿Algunas ideas?

Si es necesario, puedo proporcionar un pequeño archivo zip para ilustrar el problema.

Lo primero es lo primero

npm install --save lodash

npm install -D @types/lodash

Cargue la biblioteca completa de 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)

O cargar solo funciones con las que vamos a trabajar

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

UPDATE - March 2017

Actualmente estoy trabajando con ES6 modules , y recientemente pude trabajar con lodash así:

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

O import lodash functionality específicas de lodash functionality :

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

NOTA : la diferencia es * as no se requiere en la syntax

Referencias

Buena suerte.

  1. Instalar lodash

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

  1. En index.html, agregue el mapa para lodash:

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

  1. En el código .ts import lodash module

import _ from ''lodash'';

Aquí se explica cómo hacerlo a partir de Typecript 2.0: (tsd y typings están en desuso a favor de lo siguiente):

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

Luego, en su archivo .ts:

Ya sea:

import * as _ from "lodash";

O (como lo sugiere @Naitik):

import _ from "lodash";

No estoy seguro de cuál es la diferencia. Usamos y preferimos la primera sintaxis. Sin embargo, algunos informan que la primera sintaxis no funciona para ellos, y alguien más ha comentado que la última sintaxis es incompatible con los módulos de paquete web con carga lenta. YMMV.

Editar el 27 de febrero de 2017:

Según @Koert a continuación, import * as _ from "lodash"; es la única sintaxis que funciona a partir de Typecript 2.2.1, lodash 4.17.4 y @ types / lodash 4.14.53. Él dice que la otra sintaxis de importación sugerida da el error "no tiene exportación predeterminada".

Desde Typecript 2.0, los módulos @types npm se utilizan para importar tipings.

# Implementation package (required to run) $ npm install --save lodash # Typescript Description $ npm install --save @types/lodash

Ahora, dado que esta pregunta ha sido respondida, entraré en cómo importar eficientemente lodash

La forma segura de importar la biblioteca completa (en main.ts)

import ''lodash'';

Este es el nuevo bit aquí:

Implementando un lodash más ligero con las funciones que necesita

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

fuente: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PD: El artículo anterior es una lectura interesante sobre cómo mejorar el tiempo de compilación y reducir el tamaño de la aplicación

Estoy en Angular 4.0.0 usando el preboot/angular-webpack , y tuve que tomar una ruta ligeramente diferente.

La solución proporcionada por @Taytay funcionó principalmente para mí:

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

e importar las funciones en un archivo .component.ts dado usando:

import * as _ from "lodash";

Esto funciona porque no hay una clase exportada "predeterminada". La diferencia en la mía era que necesitaba encontrar la forma en que se cargaba en bibliotecas de terceros: vendor.ts, que se encontraba en:

src/vendor.ts

Mi archivo vendor.ts se ve así ahora:

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

Estoy usando ng2 con webpack, no con el sistema JS. Los pasos necesarios para mí fueron:

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

y luego en el archivo que deseo importar subrayado:

import * as _ from ''underscore'';

Importé con éxito lodash en mi proyecto con los siguientes comandos:

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

Luego lo importé de la siguiente manera:

import * as _ from ''lodash'';

y en systemjs.config.js definí esto:

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

Instalar a través de npm .

$ npm install lodash --save

Ahora, import en el archivo:

$ import * as _ from ''lodash'';

ENV:

CLI angular: 1.6.6
Nodo: 6.11.2
OS: darwin x64
Angular: 5.2.2
mecanografiado: 2.4.2
paquete web: 3.10.0

Instale todo el terminal:

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

Agregar rutas en 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>

Importar lodash en la parte superior del archivo .ts

import * as _ from ''lodash''

La gestión de los tipos a través de las typings y los comandos tsd última instancia está en desuso a favor del uso de npm a través de npm install @types/lodash .

Sin embargo, luché con "No se puede encontrar el módulo lodash" en la declaración de importación durante mucho tiempo:

import * as _ from ''lodash'';

Finalmente, me di cuenta de que Typecript solo cargará tipos de node_modules / @ types start versión 2, y mi servicio de lenguaje VsCode todavía estaba usando 1.8, por lo que el editor informaba errores.

Si está usando VSCode, querrá incluir

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

en su archivo VSCode settings.json (para la configuración del espacio de trabajo) y asegúrese de tener instalada la npm install [email protected] --save-dev > = 2.0.0 a través de npm install [email protected] --save-dev

Después de eso, mi editor no se quejaría de la declaración de importación.

La importación parcial de lodash debería funcionar en angular 4.1.x usando la siguiente notación:

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

O use ''lodash-es'' e importe en el módulo:

import { assign } from ''lodash-es'';

Otra solución elegante es obtener solo lo que necesita, no importar todo lo

import {forEach,merge} from "lodash";

y luego úsalo en tu código

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

Paso 1: Modifique el archivo package.json para incluir lodash en las dependencias.

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

Paso 2: estoy usando el cargador de módulos SystemJs en mi aplicación angular2. Así que estaría modificando el archivo systemjs.config.js para mapear 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);

Paso 3: ahora instala npm

Paso 4: Para usar lodash en tu archivo.

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

Si alguien más se encuentra con este problema y ninguna de las soluciones anteriores funciona debido a problemas de "Identificador duplicado", ejecute esto:

npm install typings --global

Con versiones anteriores de tipings, las cosas se complican y obtendrá un montón de problemas de "identificador duplicado". Además, no es necesario usar --ambient por lo que puedo decir.

Entonces, una vez que los tipings estén actualizados, esto debería funcionar (usando el inicio rápido de Angular 2).

Correr:

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

Primero, agregue esto a systemjs.config.js:

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

Ahora puede usar esto en cualquier archivo: import * as _ from ''lodash'';

Elimine su carpeta de tipings y ejecute npm install si todavía tiene problemas.

Tal vez sea demasiado extraño, pero nada de lo anterior me ayudó, en primer lugar, porque había instalado correctamente el lodash (también reinstalado a través de las sugerencias anteriores).

En resumen, el problema estaba relacionado con el uso del método lodash de lodash .

Lo arreglé simplemente usando JS in operador.

También creé tipings para lodash-es , así que ahora puedes hacer lo siguiente

instalar

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

uso

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

si usa rollup, sugiero usar esto en lugar de lodash ya que se sacudirá correctamente los árboles.

También puede seguir adelante e importar a través de viejos requisitos, es decir:

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

Esto es lo único que funcionó para nosotros. Por supuesto, asegúrese de que las llamadas require () vengan después de las importaciones.

Tenga en cuenta que npm install --save fomentará cualquier dependencia que su aplicación requiera en el código de producción.
En cuanto a "tipings", solo es requerido por TypeScript, que eventualmente se transpira en JavaScript. Por lo tanto, probablemente no desee tenerlos en el código de producción. Sugiero ponerlo en las devDependencies de devDependencies su proyecto, usando

npm install --save-dev @types/lodash

o

npm install -D @types/lodash

(Ver publicación de Akash, por ejemplo). Por cierto, es la forma en que se hace en ng2 tuto.

Alternativamente, así es como podría verse su 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" } }

solo un consejo

Lo bueno de npm es que puede comenzar simplemente haciendo una npm install --save o --save-dev si no está seguro de la última versión disponible de la dependencia que está buscando, y la configurará automáticamente para usted en su package.json para su uso posterior.

Tuve exactamente el mismo problema, pero en una aplicación Angular2, y este artículo solo lo resuelve: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Resumen del artículo:

  1. Instalación de la biblioteca npm install lodash --save
  2. Agregar definiciones de TypeScript para el tsd install underscore Lodash tsd install underscore
  3. Incluye Script <script src="node_modules/lodash/index.js"></script>
  4. Configuración de SystemJS System.config({ paths: { lodash: ''./node_modules/lodash/index.js''
  5. Importar módulo import * as _ from ''lodash'';

Espero que también pueda ser útil para su caso

probar >> tsd install lodash --save

si no funciona después

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

intentas esto e importas lodash

typings install lodash --save

Actualización 26 de septiembre de 2016:

Como dice la respuesta de @ Taytay, en lugar de las instalaciones de ''tipings'' que usamos hace unos meses, ahora podemos usar:

npm install --save @types/lodash

Aquí hay algunas referencias adicionales que respaldan esa respuesta:

Si todavía usa la instalación de tipings, vea los comentarios a continuación (por otros) con respecto a '''' ''--ambient'' '''' y '''' ''--global'' ''''.

Además, en el nuevo Inicio rápido, config ya no está en index.html; ahora está en systemjs.config.ts (si usa SystemJS).

Respuesta original

Esto funcionó en mi mac (después de instalar Angular 2 según Quick Start ):

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

Encontrará varios archivos afectados, p. Ej.

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

Angular 2 Quickstart usa System.js, así que agregué ''map'' a la configuración en index.html de la siguiente manera:

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

Luego, en mi código .ts pude hacer:

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

Ediciones de mediados de 2016:

Como @tibbus menciona, en algunos contextos, necesita:

import * as _ from ''lodash'';

Si comienza desde angular2-seed , y si no desea importar cada vez, puede omitir el mapa e importar los pasos y simplemente descomentar la línea lodash en tools / config / project.config.ts.

Para que mis pruebas funcionen con lodash, también tuve que agregar una línea a la matriz de archivos en karma.conf.js:

''node_modules/lodash/lodash.js'',