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

问题

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'

回答1:

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"
]

回答2:

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.

来源：https://stackoverflow.com/questions/50280575/import-bootstrap-in-angular-6-angular-json-error-enoent-no-such-file-or-direct

标签

angular

bootstrap-4