ng6引用第三方JS和CSS文件

1. 通過配置angular.json加載js文件

在angular.json(ng5為angular-cli.json)文件 scripts節點添加js文件路徑

配置為

"scripts": ["xxx.js", "yyy.js"]

CSS文件為

"styles": ["src/styles.css"]

適用的場景有:

1.在項目中直接使用npm install xxx這種方式安裝的js文件, 安裝文件會放到node_modules目錄,由npm統一管理.通過引用路徑

"scripts": ["./node_modules/jquery/dist/jquery.js"]

注意:angular5的node_modules引用路徑為"../node_modules/jquery/dist/jquery.js"

2.本地的js文件通常會放到src/app/assets目錄,引用這個目錄的路徑

"scripts": ["src/assets/my.js"]

2. 通過index.html直接引入

<script type="text/javascript" src="xxx.js"></script>

• 訪問js文件的函數和變量

上面引入的js文件其實是無法直接被.ts訪問的

所以需要對變量和函數做個.d.ts聲明

我們可以新建個文件my.d.ts,然后放到src的任意目錄,比如src/app/my.d.ts

在文件中聲明我們的類型,例如

declare var $: any;
declare var jQuery: any;

3. 通過配置tsconfig.json

{
  "compilerOptions": {
    "allowJs": true
  }
}

js代碼要符合CommonJs規范
例如a.js

exports.fn = function(){
     console.log'test FN');
}

然后就可以在ts文件直接導入了

import *  as A  from "../../assets/a.js";

ngOnInit() {
   A.fn();
  }