引入外部插件是項目中非常重要的環節。因為部分插件以js語法寫的，而ng4用的是ts語法，所以在引入時需要配置。
Step1：引入swiper插件的js文件【css在下面會講到，先別急】
很重要的意見：親測，如果用【方法二】引入的js導致效果有問題，請用【方法一】再試
方法一：在index.html中引入
可以用線上的地址，或者是下載到assets文件夾下
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
方法二：命令行引入
npm install swiper --save npm install swiper --save-dev
備注：--save配置在生產環境；--save-dev配置在開發環境
命令執行完畢后，生產的swiper包會下載到node_modules文件夾下的swiper文件夾。
同時在package.json文件下會自動引入swiper配置。
在angular-cli.json文件中配置js路徑【相對於index.html的路徑】
Step2：配置swiper插件被ts識別
為什么要這步操作呢？因為ts並不能准確識別js語法，所以需要用ts中的interface接口，將js轉化成ts並暴露出來。
npm install @types/swiper --save npm install @types/swiper --save-dev
操作完成后，會在node_modules文件夾下生成@types_swiper文件夾。
查看文件夾下的index.d.ts文件，不明覺厲。
Step3：在app.module.ts中將被識別的swiper插件引入項目中
import * as A from 'B';
打開node_modules文件夾下的@types_swiper文件夾下的index.d.ts，見下圖
A：指的是插件的類，比如Swiper、$
B：指的是index.d.ts中的模塊名稱
import * as Swiper from 'swiper';
Step4：引入插件的css
方法一：在index.html中引入
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
方法二：在styles.css中引入
@import "../node_modules/swiper/dist/css/swiper";
1、css的后綴不用寫，寫了反而報錯
2、iconfont.css在引入時會報錯，請在index.html中引入