angular4チュートリアルを落としてきて、そのチュートリアル上でHMAC-SHA256 hash形式の文字列を作成したいのですが、外部ライブラリをimportしてうまく使うことができません。
angular4のtypescriptで外部ライブラリを使いたい場合、npm install をして、import jsSHA from 'jssha' のように呼び出すだけではダメでしょうか?
以下試した手順です。
まずチュートリアルの以下ページよりサンプルアプリをダウンロード。
https://angular.io/tutorial/toh-pt1
https://angular.io/generated/zips/toh-pt1/toh-pt1.zip
その後、zipファイルを回答して npm install を行いました。
npm start を行い、以下の画面を確認しました。
その後、以下のページで記載されているようにjsshaというライブラリをインストールして
https://forum.ionicframework.com/t/can-i-use-sha256-function-in-ionic/69418/2
npm install jssha --save npm install @types/jssha --save-dev
以下のように app.componetnt.tsに import分を追加しました。
import { Component } from '@angular/core'; import jsSHA from 'jssha' <==== この行を追加
その後、npm start を実行すると
src/app/app.component.ts(2,8): error TS1192: Module '"/application/test/toh-pt1 /node_modules/@types/jssha/index"' has no default export.
と出てしまい、そもそもimport することができませんでした。
こちら何か設定が足りていないものでしょうか?
関係あるかどうかわかりませんが、Anguralチュートリアルのsystemjs.config.jsは以下です。
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder 'app': 'app', // angular bundles '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'tslib': 'npm:tslib/tslib.js', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' } } }, rxjs: { defaultExtension: 'js' } } }); })(this);
node_module配下は以下のようにファイルができているようです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/27 01:02
2017/09/27 01:55
2017/09/27 09:18 編集
2017/09/27 23:58
2017/10/13 09:15