importer bootstrap dans angular 6 angular.json Erreur : ENOENT : no such file or directory

Question

Quelle est la manière correcte d'importer bootstrap dans Angular 6. Dans les versions précédentes, je l'ai fait de cette façon et cela a fonctionné correctement.

angular-cli.json (Angulaire 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 (Angulaire 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"
        ]

obtenir une erreur :

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

Answer 1

Cette configuration devrait fonctionner car, comme vous le voyez dans angular.json il y a une propriété "root": "", pour importer des fichiers, alors suivez le code suivant

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

Answer 2

Je vois que votre erreur montre un fichier jquery manquant. Mais le bootstrap 4 n'a pas besoin de jquery. Si vous utilisez la commande npm install --save @ng-bootstrap/ng-bootstrap d'angular-cli je pense qu'il n'est pas nécessaire d'avoir une dépendance de jquery. Il faut également ajouter au module principal et au module dans lequel vous voulez implémenter le style bootstrap l'instruction import :

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

Il n'est pas nécessaire d'installer jquery, cela pourrait interférer avec le code ng-bootstrap. Vous devez peut-être supprimer tout jquery que vous avez installé.