Angular 引入第三方类库bootstrap和jQuery

Angular项目引入第三方类库

 

1.首先打开Node.js command prompt，进入Node.js 命令行

 

2.cd到项目文件夹下。

 

3.下载bootstrap和jQuery

npm install jQuery -save

npm install bootstrap -save

下载成功后，第三方类库包保存在开发环境的node_modules目录下，而且在package.json中会增加相应的配置命令

 

4.在项目中引入第三方类库

打开angular.json  找到build中的styles和scripts

.. 的意思是返回上级路径

在styles中添加  “../node_modules/bootstrap/dist/css/bootstrap.css”

在scripts中添加 ”../node_modules/bootstrap/dist/js/bootstrap.js”

“../node_modules/jquery/dist/jquery.js”

这里添加stryles的是bootstrap中css文件的相对路径

scripts添加的是jQuery和bootstrap中js文件的相对路径

通常大部分都是上面的写法。

但是我的这样

 

这样第三方类库就配置完成了。

 

5.安装bootstrap和jQuery的类型描述文件

npm install @types/jquery -–save-dev

npm install @types/bootstrap --save-dev

 

这样就可以在typescript中调用jquery和bootstrap里面的相关内容