Angular4中调用js代码

引言：Angular2开始采用TypeScript进行编码。本文讲述如何在Angular4项目中调用原生的 js 代码。

本文代码：
http://git.oschina.net/mingyueyixi/angular4-usejs

代码使用环境：webstrom

---

调用过程可以归纳为：

• 引入 js 文件到项目中
• 编写 TypeScript 声明文件
• 在 .angular-cli.json 或 index.html 中配置 js 文件（可以没有）

然后，就可以调用到原生的 js 代码了。

其中，第三步可以没有的原因是，有的 js 代码编写符合各种规范（AMD，UMD等），在编写好声明文件之后，可以直接通过 import的方式使用。import方式，js 代码会被一块打包到一个文件中。

什么是TypeScript 声明文件？

TypeScript 声明文件是以 .d.ts 结尾的 ts 文件，是 TypeScript 和 JavaScript 之间的桥梁。

TypeScript 号称 JavaScript 的超集，这么说，TypeScript 是兼容 JavaScript 的，但令人遗憾的是，直接将 .js 文件改为 .ts 文件，大多数情况下会产生很多错误。而如果 js 的内容比较少，也不复杂，还是比较容易改的。一些简单的 js ，只要把 var 改为let 就能够正常编译和运行了。

许多第三方 js 库，动辄几千行代码，总不能使用 TypeScript 去重写一遍，这时候就需要编写 TypeScript 声明文件。

虽然许多常用 js 库已经自带.d.ts 文件，但实际上，有时候我们还是无法避免要编写声明文件。比如一些偏僻的 js 代码；比如自己写的 js 代码。

.angular-cli.json 的作用

angular-cli 的配置文件，可以配置项目的目录结构，构建方式等。

.angular-cli.json的script属性

这个属性用于配置全局的 js，类似于html中的标签。

直接在index.html中引入js

当不通过模块加载器加载（import），也不配置.angular-cli.json的script属性时，能通过index.html引入js吗？

按道理说是可以的。但 js 所在必须在构建时被原样导出，否则项目构建后js 不在 build 路径（dist）下，从而导致引用失败。符合这个条件的如 src/asset 文件夹。

需要注意的是，asset文件夹是专门装载资源文件的，比如图片什么的，任何文件都会被复制过去，用来放置 js 代码库，虽然也可以，但总觉得有一点点奇怪。

这个问题，我们可以通过在 .angular-cli.json 中再配置一个具有assets特性的目录来解决。不过，angular-cli.json的script标签能够解决js的引入，似乎在html中直接引入就不是必须的了。

题外话：

Ionic 项目虽然大量使用了Angular，但它没有使用Angularcli进行构建，所以，Ionic 中在 index.html使用<script>标签引入 js ，需要另行配置。可以参考我的下一篇文章。

.angular-cli.json 更多配置，参考它的官网：
https://www.npmjs.com/package/angular-cli