学习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安装,再运行后果然成功了。
这是本人在自学遇到的第三方包引入无效的解决方法,希望能帮到大家,因为是刚开始学习还是小白,如果大家觉得有不对的地方或者还有更好的方法欢迎指教,谢谢~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值