Help us understand the problem. What is going on with this article?

angular-cliプロジェクトにJavaScriptライブラリを組み込む方法

More than 3 years have passed since last update.

環境

このドキュメントでは次のバージョンのangular-cliで生成したプロジェクトについて記述しています。

公式情報

Angular2用のサードパーティライブラリであれば、npm installで取得可能になっていたり、ライブラリのREADME等に説明があるため困ることはないでしょう。

また、有名どころのライブラリであればTypeScriptの型定義ファイルが@typesに集約されているためこちらもnpm installしてimportして利用することができます。

その他のJSライブラリの組み込み方法

npmに登録されていないし誰もTypeScriptの型定義の面倒を見てくれていない、何かの案件用のライブラリや昔からあるオレオレライブラリへの対応方法についてまとめます。

このドキュメントではそのようなライブラリの例として、hello.jsがあるとします。
単純に関数1つにしておきます。

function Hello() {
  console.log('hello !');
}

ファイルの配置

プロジェクト内のどこかに置きます。
このドキュメントでは Project/src/js/hello.js に置いてみます。

公式のGlobal Library Installationの通り、angular-cli.json に記述を追加します。

"scripts": [
  "../src/js/hello.js"
],

scriptsに記述を追加することで ng buildng serve した時にAngularアプリにhello.jsが含まれるようになります。

ライブラリの呼び出し

hello.jsのHello関数を呼び出してみます。

import { Component } from '@angular/core';

// 型定義は手抜き
declare var Hello: any;

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

  constructor() {
    Hello(); // <- 呼び出せる
  }
}

ng test対応

ng buildng serve では問題ないのですが、ng test では次のようなReferenceErrorが発生してしまいます。

Failed: Error in :0:0 caused by: Hello is not defined
ReferenceError: Hello is not defined

ng test のテスト中でもライブラリを利用するには karma.conf.js にも記述を追加する必要があるようです。

files: [
  // test.tsよりも先に記述すること!!
  { pattern: './src/js/hello.js', included: true, watched: false },
  { pattern: './src/test.ts', watched: false }
],

※注意
test.tsの次に追加してしまうと相変わらずReferenceErrorが発生してしまいます。test.tsの前に記述を追加しましょう。

shimitei
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした