import bootstrap in angular 6 angular.json Error: ENOENT: no such file or directory

Question

What is the correct way to import bootstrap in Angular 6. In previous versions I did it this way and it worked correctly.

angular-cli.json (Angular 5)

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

angular.json (Angular 6)

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

get error:

Error: ENOENT: no such file or directory, open '/Users/pacozevallos/myApp/node_modules/jquery/dist/jquery.slim.min.js'

Pardeep Jain · Accepted Answer · 2018-05-15 07:51:53Z

7

This configuration should work because as you see in angular.json file there is property "root": "", for importing files, so follow below piece of code

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

edited May 15, 2018 at 7:51

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

answered May 10, 2018 at 20:34

Chau Tran

5,1481 gold badge26 silver badges40 bronze badges

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

1 Comment

Paco Zevallos Over a year ago

This works for me I'm just seeing some changes of angular 6 thanks for the help

Llazar · Accepted Answer · 2018-05-10 20:19:03Z

0

I see your error is showing a jquery file missing. But the bootstrap 4 does not need jquery. If you are using the command npm install --save @ng-bootstrap/ng-bootstrap from angular-cli I think is not need for a jquery dependency. Also need to add to the main module and the module that you want to implement the bootstrap styling the import statement:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

It is not necessary to install jquery, might interfere with ng-bootstrap code. Maybe you need to remove any jquery that you may installed.

answered May 10, 2018 at 20:19

Llazar

3,3293 gold badges20 silver badges28 bronze badges

1 Comment

Chau Tran Over a year ago

The OP was talking about bootstrap from getbootstrap.com, not ng-bootstrap

Collectives™ on Stack Overflow

import bootstrap in angular 6 angular.json Error: ENOENT: no such file or directory

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related