Not able to add bootstrap to Angular Project

Question

I am trying to add bootstrap to my angular project but I am not able to. I am not getting any errors either.

I even tried some of the solutions on stackoverflow. I am using Angular 7. I have installed bootstrap, jquery and popper.js. I have also added them to angular.json.

Below is my angular.json

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

Following is my import statement in AppModule.ts

import { bootstrap } from 'bootstrap';

I havent included it in the imports array. Because when I did I got the following error

Unexpected value 'undefined' imported by the module 'AppModule'

Any help would be much appreciated.

I'm guessing that one of the NgModules that you're trying to import into AppModule is not defined. Did you "export" the NgModule? — Michael Kang
– Michael Kang, Commented Nov 11, 2019 at 7:36

Libin Prasanth · Accepted Answer · 2019-11-11 07:28:38Z

It's not required to import bootstrap in your AppModule.ts file, You can use bootstrap classes without import any module. Because you already imported bootstrap css and js files in your angular.json file

Char · Accepted Answer · 2019-11-11 07:37:15Z

"./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js", "./node_modules/popper.js/dist/umd/popper.min.js"

Maybe you exceeded another dot for popper.js. Check also your node_modules if the paths are correct.

also, if you edited angular.json, try building and running again

Collectives™ on Stack Overflow

Not able to add bootstrap to Angular Project

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related