引入外部插件是项目中非常重要的环节。因为部分插件以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中引入

angular4.0如何引入外部插件1:import方案的更多相关文章

  1. angular4.0如何引入外部插件2:declare方案

    前面有个<angular4.0如何引入外部插件1:import方案>,但是有局限,因为方案1需要用到@types这个东西. 但是并不是每一个插件都有@types,所以现在写个方案2. 拿引 ...

  2. Vue-cli开发笔记三----------引入外部插件

    (一)绝对路径直接引入: (1)主入口页面index.html中头部script标签引入: <script type="text/javascript" src=" ...

  3. 在vue-cli中引入外部插件

    一.可以用npm下载的 现在以jquery为例子: 1 先在package.json中的dependencies中写入“jquery”:“^3.2.1”(jquery版本) 2 在npm中搜索jque ...

  4. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  5. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  6. Angular4.0引入第三方框架,eg: bootstrap、jquery

    最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...

  7. Vue style里面使用@import引入外部css, 作用域是全局的解决方案

    问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...

  8. 如何在Android应用中引入外部网页

    在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...

  9. HTML引入外部文件,解决统一管理导航栏问题。

    1.IFrame引入,看看下面的代码     <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...

随机推荐

  1. 使用css修改radio、checkbox样式

    input[type=radio],input[type=checkbox]  { display: inline-block; vertical-align: middle; width: 20px ...

  2. Android应用开发allowBackup敏感信息泄露的一点反思

    1 背景 [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 事实上这篇文章可能有些小题大作,但回过头想想还是非常有必要的,有点阴沟里翻船的感觉. ...

  3. 【Java集合源代码剖析】LinkedHashmap源代码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/37867985 前言:有网友建议分析下LinkedHashMap的源代码.于是花了一晚上时间 ...

  4. 注册Azure AD 应用程序

    作者:陈希章 发表于2017年3月22日 在此前的文章中,我给大家介绍了分别用Graph 浏览器以及第三方工具(POSTMAN)快速体验Microsoft Graph的功能,其中有一个重要的环节就是, ...

  5. Python:list 和 array的对比以及转换时的注意事项

    Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...

  6. 在Office Add-in中实现单点登陆(SSO)

    作者:陈希章 发表于 2017年12月27日 这篇文章经过多次修改,终于在今天晚上写完了,演示用的范例代码也终于跑通了.因为这个SSO的功能目前只是Preview的状态,所以本篇文章严格参考了官方的文 ...

  7. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  8. Oracle索引详解

    Oracle索引详解(二) --索引分类   Oracle 提供了大量索引选项.知道在给定条件下使用哪个选项对于一个程序的性能来说非常重要.一个错误的选择可能会引发死锁,并导致数据库性能急剧下降或进程 ...

  9. 计算机和HMI设备通信之程序上下载

    1.传送模式 2.串行接口传送HMI,软件采用Wincc flexable smart v3 3.设置HMI设备,给HMI设备上电 打开控制面板,双击Transfer 使能Enable Channel ...

  10. tensorflow ckpt文件转caffemodel时遇到的坑

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...