Angular(TypeScript) 安装jQuery 与 Bootstrap

既然用TS开发了，那就尝试用TS的思维来解决问题。

为了在Angular项目中使用jquery和bootstrap， 折腾了不少时间，虽然也能实现 效果，不过实现的方式比较混乱，没有章法。今天整理出了一个比较正规的方式来引用jquery和bootstrap, 整理如下：

一、 安装jquery

1.  安装：npm install jquery --save  ，安装之后，node_modules中有了：

2. 在配置文件angular.json中引用：

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

3. 在app.component.ts中引用：

import * as $ from 'jquery';

然后就可以在其他地方使用jquery了。

 

二、 安装bootstrap

1.  安装：npm install bootstrap --save，安装之后，node_modules中有了：

2. 在配置文件angular.json中引用：

"styles": [
   "src/styles.css",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

"scripts": [
     "node_modules/jquery/dist/jquery.js",
     "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

 

问题解决：

          

参考：

https://therichpost.com/add-and-run-jquery-in-angular-7

https://www.talkingdotnet.com/add-bootstrap-4-to-angular-6-application/