1. shimitei

    Posted

    shimitei
Changes in title
+angular-cliプロジェクトにJavaScriptライブラリを組み込む方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,82 @@
+# 環境
+
+このドキュメントでは次のバージョンのangular-cliで生成したプロジェクトについて記述しています。
+
+- angular-cli@1.0.0-beta.21
+
+
+# 公式情報
+
+- [3rd Party Library Installation](https://github.com/angular/angular-cli#user-content-3rd-party-library-installation)
+- [Global Library Installation](https://github.com/angular/angular-cli#global-library-installation)
+
+Angular2用のサードパーティライブラリであれば、npm installで取得可能になっていたり、ライブラリのREADME等に説明があるため困ることはないでしょう。
+
+また、有名どころのライブラリであればTypeScriptの型定義ファイルが[@types](https://www.npmjs.com/~types)に集約されているためこちらもnpm installしてimportして利用することができます。
+
+
+# その他のJSライブラリの組み込み方法
+
+npmに登録されていないし誰もTypeScriptの型定義の面倒を見てくれていない、何かの案件用のライブラリや昔からあるオレオレライブラリへの対応方法についてまとめます。
+
+このドキュメントではそのようなライブラリの例として、hello.jsがあるとします。
+単純に関数1つにしておきます。
+
+> function Hello() {
+> console.log('hello !');
+> }
+
+## ファイルの配置
+
+プロジェクト内のどこかに置きます。
+このドキュメントでは `Project/src/js/hello.js` に置いてみます。
+
+公式の[Global Library Installation](https://github.com/angular/angular-cli#global-library-installation)の通り、`angular-cli.json` に記述を追加します。
+
+> "scripts": [
+> "../src/js/hello.js"
+> ],
+
+scriptsに記述を追加することで `ng build` や `ng 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 build` や `ng 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の前に記述を追加しましょう。