学习Angular4遇到问题，解决方法（一）

学习Angular4bootstrap样式无法引入的两种解决方法（一）

本人刚开始根据网上的文档和一些视频教程开始学习Angular4，在学习过程中遇到了一个问题。搭建好项目架构后，引入jquery和bootstrap后，样式和JS无法引入成功，百度后发现网上很多人遇到相关问题，但是都没有详细的解决方案，在此我分享一下我的搭建和解决过程：

一、

1.安装好node.js和npm，并且确认安装版本在node 6.9.0 和 npm 3.0.0以上；

2.全局安装Angular CLI，安装完成后ng -v查看是否安装成功（在这里安装不能为了方便就使用cnpm）；

npm install -g @angular/cli

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文件；



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

二、

所有的操作与方法都是一致的，通篇都可以试用cnpm下载安装依赖包，唯一的修改是配置项目中.angular-cli.json文件；



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

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

这是本人在自学遇到的第三方包引入无效的解决方法，希望能帮到大家，因为是刚开始学习还是小白，如果大家觉得有不对的地方或者还有更好的方法欢迎指教，谢谢~