Integrating bootstrap in Angular 2 cli project

Question

Facing Issues in integrating Bootstrap with angular 2 cli. I am new to angular 2 CLI please guide me and correct me if I am doing my steps wrong. Thanks in advance.

Steps followed:
1. npm install bootstrap@next --save
2. modified .angular-cli.json file
This is what I modified:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

restarted the app with ng serve

Errors occured as follows:

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve '/Users/sagarbhanushali/projectangularcliyoutube/myProject/node_modules/tether/dist/tether.js' in '/Users/sagarbhanushali/projectangularcliyoutube/myProject/node_modules/@angular/cli/models/webpack-configs' @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

I am new to angular 2 CLI please guide me and correct me if I am doing my steps wrong. Thanks in advance.

Can you post you package.json file? I looks like you've got an issue with tether.js, not bootstrap. — Jason Lemrond
– Jason Lemrond, Commented Jun 27, 2017 at 0:29
yeah all the packages were not loading together initially and hence used bootstrap-loader and issue is resolved. thanks — SagarBhanu
– SagarBhanu, Commented Jul 3, 2017 at 18:47

SagarBhanu · Accepted Answer · 2017-06-27 05:04:35Z

2

Resolved... used bootstrap loader to solve it. run following commands. 1. npm install --save resolve-url-loader --dev 2. npm i --save-dev bootstrap@next bootstrap-loader tether jquery

answered Jun 27, 2017 at 5:04

SagarBhanu

898 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Lease Over a year ago

Thanks for the answer first of all. Do you have a canonical reference, or any sources that led you to this answer? Or just banged around until it worked? Also, --dev is deprecated. I would recommend following npm's suggestion, npm WARN install Usage of the --dev` option is deprecated. Use --only=dev instead.` to keep your answer more relevant for a longer period of time.

Collectives™ on Stack Overflow

Integrating bootstrap in Angular 2 cli project

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related