在Angular项目动态引入JS模块

背景

由于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;