背景

由於Angular專案預設使用ts作為開發語言，但是Angular本身是一個新的框架，導致很多好用的js庫都沒有對應的ts版本。所以在開發angular專案的時候存在Angular專案的場景。

下面以引入jquery為例，介紹兩種方法：

方法一

直接在應用入口index.html使用script方式引入：

<script src="path/jquery.js"></script>

這種方法的特點：
1、全域性可以使用；
2、存在冗餘，可能只有個別的模組使用到jquery;
3、在入口頁引入的話，順序載入會影響首頁渲染的速度；

方法二

允許typescript編譯器使用編譯js檔案，並使用模組載入器動態引入：

在angular專案中，修改tsconfig.json檔案:

compilerOptions.allowJs = true;

下載jquery.js放入專案目錄下的asserts；

確保專案目錄下的.angular-cli.json檔案，在apps.asserts陣列中存在”asserts”；

由於jquery本身預設支援commomJs模組載入方式，所以可以在任何需要使用jquery的元件中直接載入即可：

import * as $ from "../vendors/jquery.min.js";

console.log($("body").height());
 

方法二的特點：

1、動態載入，按需載入，不存在冗餘；
2、更加ts/es6;