Как импортировать неосновные модули npm в Angular 2, например (использовать библиотеку шифрования)?

в моем приложении Angular 2 (SystemJS module manager, Typescript как язык сценариев) мне нужно импортировать модуль npm для обработки шифрования (либо Crypto-JS;Forge-JS или любой другой, служащий этой цели)

в случае CryptoJS, после его установки через установка npm * я попытался добавить:

  <script src="node_modules/crypto-js/crypto-js.js"></script>

на индекс: html.

в моей службе (app / services / my-service.услуга.ТС) I импортируйте его через 

  import {CryptoJS} from 'node_modules/crypto-js/crypto-js.js' // or /aes.js --> same issue

однако импорт работает неправильно, например

 console.log(CryptoJS);

печать неопределено.

я также попытался добавить путь модуля в

 System.config({
     // ...
     map: {
        CryptoJS
    }
}

и импортировать его в мою службу

 import {CryptoJS} from 'cryptoJs';

пока я не уверен что я должен на самом деле положить в SystemJS config, ни одно из решений, которые я пробовал, не сработало.

редактировать я тоже пытался...

// import ... as to overcome no default export
import * as CryptoJS from 'node_modules/crypto-js/crypto-js.js';

а то

 console.log(CryptoJS.);

не дает никакого метода AES/whatever (мой редактор обычно советует, какие методы я мог бы использовать через автозаполнение)

Изменить 2 Теперь благодаря вкладу Тьерри и Пьерредука ясно, что типы и импорт модулей являются несвязанными понятиями.

ни один из них не работает. Вот что я сделал:--15-->

я скачал CryptoJS typings file, положил его в typings/cryptojs/cryptojs.д.ТС

затем я добавил 

  /// <reference path="cryptojs/cryptojs.d.ts"/>

to typings / main.д.ТС

затем я добавил cryptojs в конфигурацию карты SystemJS:

   cryptojs: "node_modules/crypto-js/crypto-js.js"

наконец, я попытался импортировать cryptojs в мой сервис по

  import CryptoJS from 'cryptojs'

насколько я вижу, есть 2 проблемы:

  • typings не загружаются, так как нет автозаполнения при попытке импортировать модуль (я также попытался перезапустить Приложение Angular 2). Возможно, я не понял, как импортировать внешние типы?
  • модуль все равно не загружен, я вижу это по консоли.log (cryptojs) (ничего не печатается, даже не определено; маловероятно, что мои предыдущие попытки)

EDIT 3

наконец, я получил работу импорта благодаря совету Тьерри и Пьерредука (не уверен, что пошло не так в первую очередь). Однако у меня все еще есть проблемы с typings.

несмотря на Я положил 

  /// <reference path="../../typings/cryptojs/cryptojs.d.ts"/>

непосредственно в моей службе, когда я пишу

  import CryptoJS from 'cryptojs';

чуть ниже этой строки я не получаю автозаполнения, и когда я начинаю Angular 2 app over by НПМ запустить, я получаю следующую ошибку и приложение не запускается

  app/services/user.service.ts(6,22): error TS2307: Cannot find module 'cryptojs'.

Примечание: если я добавлю cryptojs в конфигурацию SystemJS (но не a), а затем напишу (без импорта)

console.log(CryptoJS.AES.encrypt('my message', 'secret key123').toString());

это просто работает, но я бы предпочел решить typings + import проблемы.

8
angular encryption npm

5 ответов

вы можете попробовать это, так как библиотека совместима с CommonJS в вашем основном HTML-файле:

System.config({
  map: {
    cryptojs: 'node_modules/crypto-js/crypto-js.js'
  },
  (...)
});

и импортировать его таким образом:

import CryptoJS from 'cryptojs';

для части компиляции вы можете следовать предложению Пьера.

редактировать

Я сделал несколько тестов, и вот как это надо делать.

  • установка типов для crypto-js:

    $ typings install --ambient crypto-js

  • включите соответствуя typings в ваше файл ТС:

    /// <reference path="../typings/main/ambient/crypto-js/crypto-js.d.ts"/>

import {Component} from 'angular2/core';
(...)

  • настройте библиотеку в SystemJS в главном HTML-файле:

    <script>
  System.config({
    map: {
      'crypto-js': 'node_modules/crypto-js/crypto-js.js'
    },
    (...)
  });
</script>

  • импортируйте библиотеку в файлы ts:

    import CryptoJS from 'crypto-js';
6

я смог заставить CryptoJS работать в проекте Angular2, созданном с помощью angular-cli, со следующими шагами / конфигурацией:

Баш

npm install crypto-js --save
typings install crypto-js --ambient --save

угловая-cli-сборка.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      /* ... */
      'crypto-js/**/*.+(js|js.map)'
    ]
  });
};

1

ответы импортируют весь crypto-js библиотека, тем самым раздувая приложение, если вы используете только небольшие его части.

Я хочу, чтобы мое приложение было максимально обрезано, поэтому это мой подход:

установить через NPM

npm install core-js@3.1.6

systemjs.конфиг.js

System.config({
    map:{
        'crypto-js':  'node_modules/crypto-js',
        ...
    },
    packages:{
        'crypto-js': {main: './index.js', defaultExtension: 'js', format: 'cjs'},
        ...
    }
});

компонент.ТС

//only the core + the modules you need
import CryptoJS from 'crypto-js/core';
import 'crypto-js/sha1';

у этого есть несколько недостатков. Методы сочетания не работают я:

не работает

let hash = CryptoJS.SHA1('abcdefghi'); // CryptoJS.SHA1 is undefined

работает

let sha1 = CryptoJS.algo.SHA1.create();
sha1.update("abcdefghi");
let hash = sha1.finalize();

чтобы избежать ошибки компилятора "Could not find module x", мне нужно было добавить следующее к таможни.вводы.д.ТС

declare module 'crypto-js/core'

затем ссылка на типизации из my main.ТС

///<reference path="./app/custom.typings.d.ts"/>

основным недостатком является то, что типы, упомянутые в других ответах, похоже, не работают с этим подходом, потому что они предназначены для целое crypto-js библиотека. Например, CryptoJS.algo не признала. Так что это действительно отстой, но у меня нет intellisense / автозаполнения в IDE

так зачем же ставить с таким недостатком? В то время как вся библиотека добавляет около 60 КБ minified JS в мое приложение, импорт только того, что мне нужно, добавляет 4.5 КБ. И это победа для меня.

1

для установки пакета cryptojs выполните следующую команду:

npm установить crypto-js --save

после завершения вышеуказанной установки, если вы используете webpack / bundles или обновленные версии angularjs, запустите следующую команду, чтобы получить файлы объявлений.

npm install --save @types / crypto-js

в @типах node_modules d.файлы ts будут добавлены, чтобы устранить ошибку, связанную с импортом для cryptojs. Это сработало для меня.

1

когда я попытался запустить:

typings install --ambient crypto-js

Я получил ошибку:

typings ERR! устаревший флаг" ambient " является устаревшим. Пожалуйста, используйте "global" вместо

вместо этого поместите эту строку в typings.файл json, он работал.

"crypto-js": "реестр: DT / crypto-js#3.1.4+20160505170201"

0