La dépendance Bootstrap4 PopperJs génère une erreur sur Angular

95

Je viens de créer un tout nouveau angular-cliprojet
et a exécuté npm install [email protected] jquery popper.js --save
et modifié les parties associées de .angular-cli.json comme ci-dessous

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

cependant recevoir l'erreur ci-dessous

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

Toute idée de comment résoudre ce problème?

twitter-bootstrap angular webpack popper.js cilerler
la source
bizarre, je l'ai fait fonctionner pour moi. utilisez-vous le dernier cli? pouvez-vous essayer de réinstaller node_modules
LLai
1
L'erreur doit être ailleurs
brijmcq
@LLai @angular/cli: 1.3.0 node: 6.11.2 npm: 5.3.0avez-vous changé les parties dans .angular-cli.json si vous ne l'avez pas fait, vous ne verrez pas l'erreur dans la console.
cilerler
ouais j'ai vos scripts et styles exacts. [email protected] [email protected] [email protected]
LLai
Je ne sais pas à quel point cela aidera, mais vous pouvez regarder cette question sur cette page, il y a une question sur la façon d'ajouter des bibliothèques tierces
Rahul Singh

Réponses:

223

En regardant les documents sur https://getbootstrap.com/docs/4.2/getting-started/introduction/#js, vous pouvez voir qu'ils importent les éléments suivants:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Notez le nom: jquery. slim .min.js, umd /popper.min.js!

Par conséquent, j'ai utilisé ce qui suit dans mon .angular-cli.json:

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.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"
      ],

Après cela, cela semble fonctionner maintenant.

Martin Bauer
la source
Qu'avez-vous dans votre packages.json pour jquery? Dans mon dossier jquery node_modules, je n'avais pas de jquery.slim.min.js. Je viens de le trouver dans jquery 3.2.1
Jim Culverwell
2
Mon package.json ressemble à ce qui suit pour jquery: `" jquery ":" ^ 3.2.1 "` Je l'ai testé avec la version complète de jquery aussi, il semble fonctionner aussi. Seul le ** umd ** / popper.min.js semble nécessaire.
Martin Bauer
2
Cette réponse a 76 votes positifs ... le développeur a donné un "RTFM" sournois / proche d'un problème Github en posant la même question 😂
brandones
4
Utiliser jQuery-slim ou pas n'a pas d'importance, mais utiliser la version umd de popper.js l'a corrigé, merci!
finstas
2
Utiliser /dist/umdplutôt que /distdans la dépendance popper a fait l'affaire. Merci.
redent84
50

J'ai eu le même problème. Ma solution n'était pas d'importer le dossier dist (./node_modules/popper.js/dist/popper.js) mais plutôt le dossier umd (./node_modules/popper.js/dist/ umd /popper.js). Peu importe si vous obtenez la version mini ou normale du fichier js.

Björn Bergenheim
la source
3

Je peux voir que beaucoup de gens ont du mal à ajouter et à inclure correctement les dépendances Bootstrap 4 (jQuery, popper.js etc.). Mais il existe une solution beaucoup plus simple sous la forme de https://ng-bootstrap.github.io .

ng-bootstrap fournit des directives angulaires natives écrites à partir de zéro. La conséquence positive est que: * vous n'avez pas besoin d'inclure et de vous soucier de jQuery, popper.js etc. * les directives fournissent des API qui "font sens" dans le monde angulaire

Pour tous ceux qui essaient d'utiliser Bootstrap 4.beta avec Angular - ng-bootstrap vient de publier sa première version bêta qui est entièrement compatible avec Bootstrap 4.beta CSS

pkozlowski.opensource
la source
Beaucoup plus facile si vous utilisez Angular, mais pas si vous utilisez AngularJS ...
El Mac
1
Eh bien, la question portait sur Angular et angular-cli, donc je ne sais pas pourquoi AngularJS est amené ici ...
pkozlowski.opensource
1

Si vous travaillez dans Asp.net Mvc umd, faites également la chose.

Comme dans https://stackoverflow.com/a/50839939/8497522, ajoutez simplement BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js"));

sauf:

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));
Damian Kurek
la source
0

Pour exécuter modal, veuillez changer la cible de "es2015" à "es5" dans tsconfig.ts

"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"] 
}
Maniraj A
la source