关于angular4通过npm安装bootstrap插件在启动时候报错问题。

  昨天在学习angular4框架的时候,通过npm安装bootstrap插件,但是在启动的时候ng serve会在控制台输出错误。当bootstrap.css从angular-cli.json中移除之后, ng serve就可以正常启动。推断的话是angular环境的问题,在将Ide(webstrom)升级到2017.2同时升级了TypeScript的版本后,之前在编辑app.component.ts时jQuery的$不能被识别的问题解决了。但是在通过Ng serve启动的时候还是报同样的错。
图片描述

之前angular-cli.json的配置为:
图片描述
  在StackOverflow上看到有人解决了这样的问题,Bootstrap 4 not working with Angular 2 app 具体的文章链接为: https://stackoverflow.com/que...
文章的大概意思是说,通过npm install bootstrap --save这种方式已经不推荐使用,应该转而使用npm install bootstrap@4.0.0-beta.2 popper.js jquery --save
并且在angular-cli.json中的配置如下:

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

按照这种方式重新安装bootstrap的插件之后,重启服务Ng serve就可以正常访问。如果你也有遇到这样的问题,希望可以帮助到你。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值