2017-08-12 1 views
58
angulaire

Je viens de créer une nouvelle marque projet
et couru npm install [email protected] jquery popper.js --save
et changé le .angular-cli.json « s parties liées comme ci-dessousPopperJs de dépendance Bootstrap4 plaids erreur sur

"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 

une idée comment y remédier?

merci à l'avance ...

+0

bizarre, je l'ai eu pour travailler pour moi. utilisez-vous le dernier cli? pouvez-vous essayer de réinstaller node_modules – LLai

+1

L'erreur doit être ailleurs – brijmcq

+0

@LLai '@ angular/cli: 1.3.0 noeud: 6.11.2 npm: 5.3.0' avez-vous changé les pièces dans **. angular-cli.json * * Si vous n'avez pas, vous ne verrez pas l'erreur dans la console. – cilerler

Répondre

133

si vous regardez la page d'amorçage (http://getbootstrap.com/), on peut voir qu'ils importent les éléments suivants:

https://code.jquery.com/jquery-3.2.1.slim.min.js 
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js 
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js 

Notez la dénomination: jquery. mince .min.js, umd /popper.min.js

donc 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, il semble fonctionner maintenant.

+0

Qu'est-ce que vous avez dans votre packages.json pour jquery? Dans mon dossier jquery de node_modules, je n'ai pas jquery.slim.min.js. En fait je viens de le trouver dans jquery 3.2.1 – lankyplanks

+2

Mon paquet.json ressemble à jquery: '" jquery ":"^3.2.1 "' Je l'ai testée avec la version complète de jquery aussi, il semble travaille aussi. Seul le ** umd **/popper.min.js semble nécessaire. –

+0

Comme vous dites ... "jquery": "^ 3.2.1" 'fonctionne bien – lankyplanks

0

j'ai le même problème, et suce ... mais si vous importez directement sur index.html sur l'étiquette de tête, comme bootrstrap disent ce, pas avec NPM ... vous obtenez bons résultats. cela ne pose pas de problèmes ... mais c'est seulement un patch. Mais si l'utilisateur n'a pas internet, c'est une autre histoire.

1

Je peux voir que beaucoup de gens ont du mal à ajouter et à inclure correctement les dépendances de Bootstrap 4 (jQuery, popper.js, etc.). Mais il existe une solution beaucoup plus facile sous la forme de https://ng-bootstrap.github.io. Ng-bootstrap fournit natif Directives angulaires é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. * directives fournissent des API qui « font sens » dans le monde angulaire

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

+0

Beaucoup plus facile si vous utilisez Angular, mais pas si vous utilisez AngularJS ... –

+1

Eh bien, la question était sur angulaire et angulaire-cli donc pas sûr pourquoi l'AngularJS est élevé ici ... –

19

J'ai eu le même problème. Ma solution était pas pour 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.