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 bootstrap@4.0.0-beta 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?

— cilerler
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. jquery@3.2.1 popper.js@1.11.1 bootstrap@4.0.0-beta

— 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

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
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
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
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
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
source