Angular4中调用js代码

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

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

代码使用环境：webstrom

调用过程可以归纳为：

引入 js 文件到项目中（npm 安装或直接copy到项目中）
编写 TypeScript 声明文件（什么？不会编写，你可以尝试any大法）
在 .angular-cli.json 或 index.html 中配置 js 文件。由于Angularcli的升级，本文此部分可能已经过时。（这个步骤可以没有）

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

其中，第三步可以没有的原因是，正常情况下编写好声明文件之后，就可以直接通过 import的方式使用了。而当遇到一些顽固不化分子、乱七八糟 js（无论如何都看不懂如何编写声明文件）、写了也引不进来，以及全局库时，我们就可以使用第三步来配置。

PS: 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 在构建时被原样复制到到build 路径（dist）下，不会发生找不到资源的情况即可。符合这个条件的如 src/asset 文件夹，以及网络链接。但具体，需要进行哪些配置，可能需要进行一些尝试。

angular-cli.json 更多配置，参考它的官方说明：
https://www.npmjs.com/package/angular-cli
(angular-cli已过时，请自行参考@angular-cli 文档)

题外话：

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

创建Angular 4 项目

在cmd命令界面中执行命令：

ng new myApp

这将会使用 AngularCli （Angular命令行工具）创建一个名为 myApp 的Angular项目。

如果没有安装过 AngularCli，使用以下命令安装：

npm install -g @angular/cli

注意，@angular/cli 和 angular-cli 是不同的，一些文章的命令不带@，不带@的 cli 版本落后，是 1.0 正式版之前的版本。

如果总是安装失败，可能需要检查网络是否通畅，Python2安装（使用cnpm安装时，似乎并非必须），TypeScript，nodejs版本。

最后到 npm 的node_module 删除Angular 残余文件，重新安装。

网络不通的解决方法：

1、翻墙
2、配置代理
3、使用cnpm代替npm

其中代理配置有两种方法，一种是使用命令配置：

npm config set registry https://registry.npm.taobao.org

执行完毕后，会在用户目录下生成npmrc文件（C:/User/xxx/npmrc）。在其中存在代理配置。

下面这种不知道有没有效果
另一种是直接到npm的安装目录（一般在nodejs的安装目录下，或者在C:\Users\xxx\AppData\Roaming\npm\node_modules中）

在npmrc文件中添加：

registry https://registry.npm.taobao.org

这种方式是全局的，会使npm的每一次下载都通过代理——淘宝npm代理（https://registry.npm.taobao.org）完成。（存疑，用户目录下的npmc只要不被删除，似乎就已经是全局的）

先来看看最简单的引入方式，了解其原理

假设jquery还没有声明文件，如何快速引入jquery？

1、在src根目录下index.html中直接引入jquery的网络链接：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloHttp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

2、声明JQuery
JQuery有个全局对象$，所以在要使用jquery的地方，声明JQuery对象：

declare var $:any;//这就是传说中的any大法。any大法好。

然后就可以像往常一样使用jq了：

$("#heheJQ").css("background","#ff00ff");

就是这样，没有坑爹的说法。当然，这么声明，只在当前文件有效。并且不会有提示，因为没有写全$有哪些方法，哪些属性嘛。

那么坑爹的原因？上面已经说过，由于编译的原因，<script> 标签指向的 js 文件极可能是不存在的，所以导致各种引入js均不生效。所以，script引入的方式，只要保证编译后 js 还在，src也是对的即可。

1、通过 import 的方式配置

在ts文件中使用import的方式导入。

（1）在项目中引入 moment.js 文件

以日期格式化库——moment.js为例，将此 js 复制到src/libs 目录中。

moment.js下载地址： https://raw.githubusercontent.com/moment/moment/develop/moment.js

没有就创建。

（2）编写TypeScript 声明文件——moment.d.ts

在src/libs目录下创建moment.d.ts文件。并根据moment.js 的代码，为其编写声明代码。

声明文件内容：

https://raw.githubusercontent.com/moment/moment/develop/moment.d.ts

这里使用写好的声明文件。自己写任务艰巨，同时并不是那么好写的。但是对于为自己的 js 代码编写 .d.ts 文件来说，这些知名的第三方库的 .d.ts 文件很成熟，具有很大的参考价值。（TypeScript 官网的文档说的并不是那么清晰、详细）

TypeScript官网声明文件的书写：

https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

建议同时参考其他知名 js 库的 .d.ts 文件来学习。因为实际的编写往往比较复杂。

（3）使用 moment 库

在AppComponent组件中，导入moment库：

import * as moment from '../../libs/moment';

然后使用它：

export class AppComponent implements OnInit {

  title = 'app';
  ngOnInit(): void {
    const formatDate = moment().format('YYYY年MM月DD日');
    console.log(formatDate);
  }
}

ng serve -o，在控制台中就能看到今天的日期了。

2. 使用 .angular-cli.json的方式配置

由于Angularcli的升级，本文此部分可能已经过时。并且，其中的声明文件仅是最简单的示例。还是建议参考那些成熟库的声明文件，和引入方式

（1）添加doglog.js文件

在src/libs中创建doglog.js文件，内容如下：

var dogLog = {
    erha: function (mess) {
        console.log("二哈" + mess);
    },
    chaiquan: function (mess) {
        console.log("柴犬" + mess);
    },
    hudiequan: function (mess) {
        console.log("蝴蝶犬" + mess);
    },
    demu: function (mess) {
        console.log("德牧" + mess);
    },
    tugou: function (mess) {
        console.log("土狗" + mess);
    }
};

(2) 编写声明文件——doglog.d.ts文件

src/libs中创建doglog.d.ts文件，内容如下：

declare let dogLog: {
    erha: (mess: string) => void;
    chaiquan: (mess: string) => void;
    hudiequan: (mess: string) => void;
    demu: (mess: string) => void;
    tugou: (mess: string) => void;
};

(3) .angular-cli.json 中配置doglog.js

在script属性中添加doglog.js 所在的路径：

...

 "scripts": [
        "./libs/doglog.js"
      ],
...

然后就可以正常使用 doglog.js 中定义的东西了。

比如:

    dogLog.erha(': 卧槽二哈');
    dogLog.tugou(': 阿黄');

项目构建会Angularcli会自动将doglog.js 写入一个js中。

一个完整的 .angular-cli.json 形如:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "rsa-angular"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "./jslibs/test1.js",
        "./jslibs/test2.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

其他说明

moment.js 库可以直接在npm配置文件package.json配置依赖，并使用npm install 命令安装。然后正常使用。

这里为了行文方便，使用它来说明如何编写.d.ts 文件，配置和调用。

——end