Angular4のtypescriptから外部ライブラリをimportができない

Question

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配下は以下のようにファイルができているようです。

Answer 1

これで動作確認出来ました。パッケージを丸ごとfromする場合は「* as hogehoge」としないといけないみたいですね。typescriptのバージョンが上がったからでしょうかね。

import { Component } from '@angular/core';
import * as jsSHA from 'jssha';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor() {
    const shaObj = new jsSHA('SHA-256', 'TEXT');
    shaObj.update('This is a test');
    const hash = shaObj.getHash('HEX');
    console.log(hash);
  }
}

追記

実行結果
コンソールの1行目に出てる(c7b..................)がconsole.log(hash):の場所です。

Comments

[shohu.yudai]

ご回答ありがとうございます！
早速、app.component.ts を上記のソースに変えて試してみたところ、以下のように404 Not Founde(chromeのconsoleで確認)がでてしまいまい、動作しませんでした。こちらのように404は出ませんでしたでしょうか？

http://localhost:3002/jssha 404 (Not Found)

[mosapride]

404は出ないですね。実行結果を追記しています。
jssha以外ところで落ちているのではないでしょうか？

[shohu.yudai]

自分の環境ですと

systemjs.config.js に以下を追加して、やっと404がでなくなりました。systemjs.config.jsを特に修正しなくてもうまく動きましたでしょうか？もし何もしていなければ、自分が何か環境設定時に抜けている手順がありそうです。

```
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
:
'jssha': 'npm:jssha', // 追加！！！！
},
packages: {
:
jssha: { // 追加！！！
main: './src/sha256.js',
defaultExtension: 'js'
},
```

[mosapride]

私がやった環境ではangular cli（https://cli.angular.io/ ）を使ってプロジェクトを作成しているのでsystemjs.config.jsに該当する役割は自動作成・管理されるので意識していないです。

angular公式にangular cliの紹介が冒頭にあるのですがサンプルはangular cliを使っていない形になっています。angularのチュートリアルとしては正しいのですがangular cliを使ったほうが楽なので導入の検討をされてはいかがですか？

[shohu.yudai]

こちら回答遅くなりすみません。angular cli で試してみようと思いますm(_ _)m