Angular5和bootstrap兼容问题

一、
1.安装好node.js和npm，并且确认安装版本在node 6.9.0 和 npm 3.0.0以上；
2.全局安装Angular CLI，安装完成后ng -v查看是否安装成功（在这里安装不能为了方便就使用cnpm）；

npm install -g @angular/cli

ng -v验证是否安装成功

3.新建项目；

ng new 项目名

4.进入项目目录下；

cd 项目名

5.安装项目所需文件包；

npm i

6.安装jquery和bootstrap（网上很多人bootstrap的样式和jquery进不来，我也同样，就是使用了cnpm来安装）；

npm install jquery --save
npm install bootstrap --save

7.配置项目中.angular-cli.json文件；
"styles": [
"styles.css",
"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/_jquery@3.3.1@jquery/dist/jquery.js",
"../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.js"
],

8.因为angular用的是typescript，为了让typescript认识bootstrap和jQuery一些字符做以下操作：

npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev

9.生成所需组件；

ng g component 组件名

10.运行；

ng serve --open

二、
所有的操作与方法都是一致的，通篇都可以试用cnpm下载安装依赖包，唯一的修改是配置项目中.angular-cli.json文件；
"styles": [
"styles.css",
"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/_jquery@3.3.1@jquery/dist/jquery.js",
"../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.js"
],

node_modules文件夹里jquery和bootstrap的文件包是快捷方式，搜索后发现真正的文件夹是_jquery@3.2.1@jquery和_bootstrap@3.3.7@bootstrap。

这时就可以使用浏览器访问 http://localhost:4200/了，很多人遇到第三方样式引入没效果。在搭建Angualr4时，我使用cnpm安装后发现了同样的事情，后来发现是因为使用了cnpm来安装，之后全部用npm安装，再运行后果然成功了。