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();
  }