Bootstrap4 निर्भरता PopperJs कोणीय पर त्रुटि फेंकता है

95

मैंने अभी एक बिलकुल नया बनाया है कोणीय CLIपरियोजना
और भाग गया npm install bootstrap@4.0.0-beta jquery popper.js --save
और नीचे के रूप में .कुल- cli.json के संबंधित भागों को बदल दिया

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

हालांकि नीचे त्रुटि प्राप्त कर रहा है

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

इसे कैसे ठीक किया जाये, कोई विचार?

— cilerler
स्रोत

अजीब है, मुझे यह मेरे लिए काम करने के लिए मिला। क्या आप नवीनतम cli का उपयोग कर रहे हैं? क्या आप नोड_मॉडल को पुनः स्थापित करने का प्रयास कर सकते हैं

— एलएलआई

1

त्रुटि कहीं और होनी चाहिए

— brijmcq

अगर आपने कंसोल में त्रुटि नहीं देखी तो @LLai @angular/cli: 1.3.0 node: 6.11.2 npm: 5.3.0ने आपको .angular-cli.json में भागों को बदल दिया ।

— साइलेस्टर

हाँ, मेरे पास आपकी सटीक स्क्रिप्ट और शैलियाँ हैं। jquery@3.2.1 popper.js@1.11.1 बूटस्ट्रैप@4.0.0-beta

— LLai

मुझे यकीन है कि यह कितना मदद करेगा, लेकिन आप इस सवाल को इस पृष्ठ पर देख सकते हैं कि तीसरे पक्ष के परिवादों को जोड़ने के बारे में एक सवाल है

— राहुल सिंह

223

डॉक्स को https://getbootstrap.com/docs/4.2/getting-started/introduction/#js पर देखकर आप देख सकते हैं कि वे निम्नलिखित आयात करते हैं:

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

नामकरण पर ध्यान दें: jquery। स्लिम .min.js, umd /popper.min.js!

इसलिए मैंने अपने में निम्न का उपयोग किया .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"
      ],

इसके बाद अब यह काम करने लगता है।

— मार्टिन बाउर
स्रोत

आपके पास अपने पैकेज में क्या है। jquery के लिए json? मेरे नोड_मॉडल्स jquery फ़ोल्डर में मेरे पास jquery.slim.min.js नहीं था। वास्तव में यह सिर्फ ३.२.१ में पाया गया

— जिम कुलवेवेल

2

मेरा पैकेज.जेसन jquery के लिए निम्नानुसार दिखता है: `" jquery ":" ^ 3.2.1 "` मैंने इसे पूर्ण jquery संस्करण के साथ भी टेस्ट किया है, यह भी काम करने लगता है। केवल ** umd ** / popper.min.js neccessary लगता है।

— मार्टिन बाउर

2

इस उत्तर में 76 अपवोट्स हैं ... देव ने एक

— झिझक "आरटीएफएम

4

JQuery-स्लिम का उपयोग करना या इससे कोई फर्क नहीं पड़ता, लेकिन popper.js के umd- संस्करण का उपयोग करके इसे ठीक कर दिया, धन्यवाद!

— फाइनस्टास

2

पॉपर निर्भरता के /dist/umdबजाय का उपयोग /distकर चाल किया। धन्यवाद।

— redent84

50

मुझे भी यही समस्या थी। मेरा समाधान डिस्ट-फोल्डर (./node_modules/popper.js/dist/popper.js) आयात करने के लिए नहीं था , बल्कि umd-folder (?/node_modules/pistper.js/dist/ umd /popper.js) पर था। इससे कोई फर्क नहीं पड़ता कि आपको js-file का मिनी या सामान्य वर्जन मिलता है।

— ब्योर्न बर्गनहेम
स्रोत

3

मैं देख सकता हूं कि बहुत से लोग बूटस्ट्रैप 4 निर्भरता (jQuery, popper.js आदि) सहित जोड़ने और ठीक से संघर्ष कर रहे हैं। लेकिन https://ng-bootstrap.github.io के रूप में एक बहुत आसान समाधान है ।

एनजी-बूटस्ट्रैप मूल प्रदान करता है , जमीन से लिखे गए कोणीय निर्देश । सकारात्मक परिणाम यह है कि: * आपको jQuery, popper.js आदि के बारे में शामिल करने और चिंता करने की आवश्यकता नहीं है। * निर्देश एपीआई को प्रदान करते हैं जो कोणीय दुनिया में "समझदारी" बनाते हैं

बूटस्ट्रैप 4.beta को कोणीय के साथ उपयोग करने की कोशिश करने वाले किसी भी व्यक्ति के लिए - एनजी-बूटस्ट्रैप ने अपना पहला बीटा जारी किया जो कि बूटस्ट्रैप 4.beta CSS के साथ पूरी तरह से संगत है

— pkozlowski.opensource
स्रोत

बहुत आसान है अगर आप कोणीय का उपयोग कर रहे हैं, लेकिन नहीं कि आप अंगुलरजेएस का उपयोग कर रहे हैं ...

— एल मैक

1

खैर, सवाल यह था कि कोणीय और कोणीय-

— क्ली के

1

अगर आप Asp.net Mvc umd में काम करते हैं तो भी बात करते हैं।

जैसे कि https://stackoverflow.com/a/50839939/8497522 सिर्फ बंडलकॉन्फ़िग में जोड़ें।

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

के सिवाय:

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

— डेमियन कुरेक
स्रोत

0

मोडल चलाने के लिए कृपया "es2015" से लक्ष्य को tsconfig.ts में "es5" में बदलें

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

— मणिराज ए
स्रोत