एक कोणीय-क्ली परियोजना में बूटस्ट्रैप कैसे जोड़ें

Question

हम कोणीय-क्ली 1.0.0-Beta.5 (w / नोड v6.1.0) के साथ उत्पन्न हमारे ऐप में बूटस्ट्रैप 4 (4.0.0-Alpha.2) का उपयोग करना चाहते हैं।

एनपीएम के साथ बूटस्ट्रैप और इसकी निर्भरता प्राप्त करने के बाद, हमारा पहला दृष्टिकोण उन्हें इसमें जोड़ने में शामिल था angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

और उन्हें हमारे में आयात करें index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

इसने ठीक काम किया ng serveलेकिन जैसे ही हमने -prodझंडे के साथ एक निर्माण किया ये सभी निर्भरताएं dist/vendor(आश्चर्य!) से गायब हो गईं ।

हमें कोणीय-क्ली के साथ उत्पन्न परियोजना में इस तरह के परिदृश्य (यानी लोडिंग बूटस्ट्रैप स्क्रिप्ट) को संभालने का इरादा कैसे है?

हमारे पास निम्नलिखित विचार थे लेकिन हम वास्तव में नहीं जानते कि किस रास्ते पर जाना है ...

• CDN का उपयोग करें लेकिन हम यह सुनिश्चित करने के लिए इन फ़ाइलों की सेवा करेंगे कि वे उपलब्ध होंगे

• dist/vendorहमारे बाद कॉपी निर्भरता ng build -prod? लेकिन ऐसा लगता है जैसे कुछ कोणीय-क्ली प्रदान करना चाहिए क्योंकि यह बिल्ड भाग का 'ध्यान रखता है'?

• में jquery, बूटस्ट्रैप और टीथर जोड़ना src/system-config.tsऔर किसी तरह उन्हें हमारे बंडल में खींचना main.ts? लेकिन यह गलत लगता है कि हम उनके आवेदन के कोड में स्पष्ट रूप से उनका उपयोग नहीं करने जा रहे हैं (पल के विपरीत। जेएस या लॉश जैसे कुछ, उदाहरण के लिए)।

Comments

क्या आपके पास उन्हें अपने सिस्टम- config.ts फ़ाइल में रखा है? आपको उन्हें मैप करना होगा।

— mjwrazor

नीचे दिए गए कई उत्तर एनजीएक्स-बूटस्ट्रैप के उपयोग की सलाह देते हैं। मैंने पाया कि यह बूटस्ट्रैप के jquery प्लगइन्स के लिए पूर्ण प्रतिस्थापन नहीं है और कभी-कभी आपको उन "देशी" jquery प्लगइन्स का उपयोग करने की आवश्यकता होती है, जैसे कि तालिकाओं में पतन की कार्यक्षमता। उस मामले में नीचे दिए गए उत्तरों में से एक की तलाश करें जो यह बताता है कि .angular-cli.json फ़ाइल से jquery स्क्रिप्ट को स्पष्ट रूप से कैसे आयात किया जाए।

— क्रिस्टोफ

stackoverflow.com/questions/43557321/…

— मोहम्मद

बस एनजी-बूटस्ट्रैप एनजी -बूटस्ट्रैप.गिथुब.इयो

— लाइम

Answer 1

महत्वपूर्ण अद्यतन: ng2-बूटस्ट्रैप को अब ngx-बूटस्ट्रैप द्वारा बदल दिया गया है

ngx-bootstrap कोणीय 3 और 4 दोनों का समर्थन करता है।

अपडेट: 1.0.0-beta.11-webpack या इसके बाद के संस्करण

सबसे पहले टर्मिनल में निम्नलिखित कमांड के साथ अपने कोणीय-क्ली संस्करण की जांच करें :

ng -v

यदि आपका कोणीय- क्ली संस्करण 1.0.0-beta.11-webpack से अधिक है , तो आपको इन चरणों का पालन करना चाहिए:

1. एनएक्सएक्स-बूटस्ट्रैप और बूटस्ट्रैप स्थापित करें :

   npm install ngx-bootstrap bootstrap --save

यह लाइन आजकल बूटस्ट्रैप 3 को स्थापित करती है, लेकिन भविष्य में बूटस्ट्रैप 4 को स्थापित कर सकती है। ध्यान रखें एनजीएक्स-बूटस्ट्रैप दोनों संस्करणों का समर्थन करता है।

2. ओपन src / ऐप्स / app.module.ts और जोड़ें:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. कोणीय- cli.json खोलें ( कोणीय 6 के लिए और बाद में फ़ाइल का नाम बदलकर angular.json हो गया ) और stylesसरणी में एक नई प्रविष्टि डालें :

   "styles": [
   "styles.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],

4. खोलें src / ऐप्स / app.component.html और जोड़ें:

   <alert type="success">hello</alert>

1.0.0-Beta.10 या नीचे के संस्करण:

और, यदि आपका कोणीय- क्ली संस्करण 1.0.0-Beta.10 या नीचे है, तो आप नीचे दिए चरणों का उपयोग कर सकते हैं।

सबसे पहले, प्रोजेक्ट डायरेक्टरी पर जाएं और टाइप करें:

npm install ngx-bootstrap --save

फिर, अपने कोणीय-cli-build.js खोलें और इस पंक्ति को जोड़ें:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

अब, अपना src / system-config.ts खोलें फिर लिखें:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...तथा:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Comments

वास्तव में एनजी 2-बूटस्ट्रैप क्या है। कोणीय 2 में देशी बूटस्ट्रैप को जोड़ने का क्या मतलब है? क्षमा करें, मैं भ्रमित हूं और इसे देख चुका हूं लेकिन अभी भी भ्रमित हूं। मैं 3rd पार्टी एनजी 2-बूटस्ट्रैप का उपयोग करने के बजाय बूटस्ट्रैप डाउनलोड करने के लिए ये समान कदम क्यों नहीं उठा सकता।

— mjwrazor

@mjwrazor यह इसलिए है क्योंकि बूटस्ट्रैप केवल शैलियों के बारे में नहीं है। यह फ्रंट-एंड फ्रेमवर्क है। एनजी 2-बूटस्ट्रैप के साथ रेटिंग घटक का उपयोग करके स्पष्ट रूप से देखें और उन कोड के बारे में सोचें जो आप इसे लागू करने के लिए लिखेंगे।

— अली घनवेटियन

भविष्य के पाठकों के लिए बस एक छोटा सा नोटिस: Angular CLI ने SystemJS से WebPack को beta.14 के साथ बदल दिया है। यह उत्तर अब पुराना हो गया है, क्योंकि यह SystemJS पर आधारित समाधान प्रदान करता है।

— २१:०१ पर jbandi

एनजी 2-बूटस्ट्रैप का उपयोग करने के विचार के लिए धन्यवाद, यहां मुझे जीथब पृष्ठ पर कोणीय क्लि के लिए एक इंस्टॉलेशन मैनुअल मिला। github.com/valor-software/ng2-bootstrap/blob/development/docs/… मेरे मामले में आयात पर AlertModule.forRoot () कॉल गायब था।

— bruno.bologna

मैं के साथ एक ही मुद्दा था angular-cli@1.1.3और ngx-bootstrap@1.7.1। पर अंतर के साथ इस चरणों का पालन करने app.module.tsकी बात नहीं कर NGX-बूटस्ट्रैप पर 'NGX-बूटस्ट्रैप / NGX-बूटस्ट्रैप' द्वारा लेकिन इस उदाहरण पर 'के रूप में NGX-बूटस्ट्रैप' द्वारा GitHub मेरी समस्या का समाधान।

— एडमंड

Answer 2

Https://github.com/angular/angular-cli पर मुख्य शब्द> ग्लोबल लाइब्रेरी इंस्टॉलेशन की तलाश में आपको उत्तर खोजने में मदद मिलती है।

उनके दस्तावेज़ के अनुसार, आप बूटस्ट्रैप लाइब्रेरी को जोड़ने के लिए निम्नलिखित कदम उठा सकते हैं।

पहले nstpm से बूटस्ट्रैप स्थापित करें:

npm install bootstrap@next

फिर ऐप्स में आवश्यक स्क्रिप्ट फ़ाइलों को जोड़ें [0]। कोणीय-cli.json फ़ाइल में स्क्रिप्ट:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

अंत में बूटस्ट्रैप सीएसएस को ऐप्स में जोड़ें [0]। शैलियाँ सरणी:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],

यदि आप इसे चला रहे हैं, तो एनजी सेवा पर पुनः आरंभ करें, और बूटस्ट्रैप 4 आपके ऐप पर काम करना चाहिए।

यह सबसे अच्छा उपाय है। लेकिन अगर आप एनजी पुनरारंभ नहीं करते हैं तो यह कभी भी काम नहीं करता है। यह अंतिम क्रिया करने के लिए दृढ़ता से अनुशंसा की जाती है।

Comments

जैसा कि मैंने लिखा है, यह एकमात्र समाधान है जो कोणीय-क्ली के नवीनतम संस्करण का उपयोग करता है।

— freethebees

Bootstrap.js निश्चित रूप से आवश्यक नहीं है! जैसा कि आप जूकरी बूटस्ट्रैप का उपयोग नहीं करना चाहते हैं। इसके लिए आपको बूटस्ट्रैप के एनजी 2 निर्देशों को स्थापित करना होगा।

— पास्कल

यदि आप बूटस्ट्रैप जावास्क्रिप्ट का उपयोग सिर्फ विरोध के रूप में करना चाहते हैं। यदि आपको स्क्रिप्ट की सरणी में इसकी निर्भरता को भी शामिल करना होगा: "../node_modules/jquery/dist/jquery.slim.js", "../ नोड_मॉड्यूल्स / टेडर / डिस्ट / जेएस / टीथर.जेएस "," ../node/modules/bootstrap/dist/js/bootstrap.js "

— हावर्ड

आप अपनी स्क्रिप्ट घोषणा में बूटस्ट्रैप.bundle.js का बेहतर उपयोग करते हैं जिसमें popper.js भी होता है।

— देजजमाच

काम करने के लिए अंतिम बिंदु को ng serveफिर से निष्पादित करने से न चूकें । इसके अलावा कोणीय सीएलआई इसे स्वचालित रूप से क्यों नहीं जोड़ सकता है? यह अच्छा होगा अगर हमारे पास इसके लिए कोई विकल्प हो।

— शैजुत

Answer 3

निम्न कार्य करें:

npm i bootstrap@next --save

यह आपके प्रोजेक्ट में बूटस्ट्रैप 4 जोड़ देगा।

इसके बाद अपनी फ़ाइल src/style.scssया src/style.cssफ़ाइल पर जाएँ (जो भी आप उपयोग कर रहे हैं उसे चुनें) और वहाँ बूटस्ट्रैप आयात करें:

शैली के लिए

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Style.scss के लिए

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

स्क्रिप्ट के लिए आपको अभी भी फाइल को कोणीय-cli.json फ़ाइल में जोड़ना होगा, जैसे ( कोणीय संस्करण 6 में, इस संपादन को फ़ाइल angular.json में किए जाने की आवश्यकता है ) :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Comments

IMHO यह भी एक बढ़िया विकल्प है, खासकर कोणीय-क्ली के नवीनतम संस्करणों के साथ। महान लाभ यह है कि यह विधि स्वीकृत उत्तर में उल्लिखित npm पैकेज से पुस्तकालय को अद्यतन करने वाले लोगों पर निर्भर नहीं करती है; इसके अलावा, यह हमें संभवतः SASS का उपयोग करके बूटस्ट्रैप चर को ओवरराइड करने में सक्षम बनाता है जबकि सीधे संकलित सीएसएस फाइलों की ओर इशारा नहीं करता है।

— मार्टिन

हां, यह क्लीनर और अधिक मॉड्यूलर है, इस प्रकार मैं इसे पसंद करता हूं!

— महात्मनिच

यह सिद्धांत मेरे लिए काम करता है, किसी भी पूर्वापेक्षा का पालन करने के लिए, मैं कोणीय और बूटस्ट्रैप के नवीनतम संस्करण का उपयोग कर रहा हूं और उपरोक्त सभी परिवर्तनों को जोड़ा, इस तरह से काम नहीं किया, लेकिन <लिंक rel = "स्टाइलशीट" टाइप = "टेक्स्ट /ss" href को जोड़ने पर काम किया = "वेंडर / बूटस्ट्रैप / डिस्ट / css / bootstrap.min.css"> index.html में

— har_shit

यह क्लि सेटअप का उपयोग कर रहा है!

— महात्मनिच

एक क्लीनर विधि @import '~ बूटस्ट्रैप / डिस्ट / सीएसएस / बूटस्ट्रैप' होगी; नोड_मॉड्यूल फ़ोल्डर से सीधे मॉड्यूल की तरह आयात करने के लिए ~ साइन का उपयोग करना। यहाँ एक स्पष्टीकरण मिला: stackoverflow.com/questions/39535760/…

— AI

Answer 4

सबसे पहले, आपको इन आदेशों के साथ टेदर, जेकरी और बूटस्ट्रैप स्थापित करना होगा

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

इन पंक्तियों को अपने कोणीय- cli.json (संस्करण 6 से आगे की ओर angular.json) फ़ाइल में जोड़ने के बाद

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Comments

आप $ projectRoot / .angular-cli.json का मतलब क्या था?

Answer 5

चूंकि बूटस्ट्रैप को कैसे शामिल किया जाए, इस बारे में आधिकारिक (कोणीय-क्ली टीम) कहानी को किसी ने भी संदर्भित नहीं किया है: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

बूटस्ट्रैप शामिल करें

बूटस्ट्रैप एक लोकप्रिय सीएसएस फ्रेमवर्क है जिसका उपयोग एक कोणीय परियोजना के भीतर किया जा सकता है। यह मार्गदर्शिका आपको अपने कोणीय CLI प्रोजेक्ट में बूटस्ट्रैप जोड़ने और बूटस्ट्रैप का उपयोग करने के लिए इसे कॉन्फ़िगर करने के माध्यम से चलेगी।

CSS का उपयोग करना

शुरू करना

एक नया प्रोजेक्ट बनाएं और प्रोजेक्ट में नेविगेट करें

ng new my-app
cd my-app

बूटस्ट्रैप को स्थापित करना

नए प्रोजेक्ट के तैयार होने और तैयार होने के बाद आपको निर्भरता के रूप में अपने प्रोजेक्ट में बूटस्ट्रैप को स्थापित करना होगा। --saveविकल्प का उपयोग करके निर्भरता को पैकेज में सहेजा जाएगा। json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

विन्यास परियोजना

अब जब प्रोजेक्ट सेट हो गया है तो इसे बूटस्ट्रैप सीएसएस को शामिल करने के लिए कॉन्फ़िगर किया जाना चाहिए।

• फ़ाइल .angular-cli.jsonको अपने प्रोजेक्ट के रूट से खोलें ।
• संपत्ति appsके तहत उस सरणी में पहला आइटम डिफ़ॉल्ट एप्लिकेशन है।
• एक संपत्ति है stylesजो बाहरी वैश्विक शैलियों को आपके आवेदन पर लागू करने की अनुमति देती है।
• को पथ निर्दिष्ट करें bootstrap.min.css

जब आप कर रहे हों तो यह निम्नलिखित जैसा दिखना चाहिए:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

नोट: जब आप परिवर्तन करते हैं .angular-cli.jsonतो आपको ng serveकॉन्फ़िगरेशन परिवर्तन लेने के लिए फिर से शुरू करना होगा।

परीक्षण परियोजना

app.component.htmlनिम्न मार्कअप खोलें और जोड़ें:

<button class="btn btn-primary">Test Button</button>

कॉन्फ़िगर किए गए एप्लिकेशन के साथ, ng serveअपने एप्लिकेशन को डेवलप मोड में चलाने के लिए चलाएं। अपने ब्राउज़र में एप्लिकेशन पर नेविगेट करें localhost:4200। सत्यापित करें कि बूटस्ट्रैप स्टाइल बटन दिखाई देता है।

SASS का उपयोग करना

शुरू करना

एक नया प्रोजेक्ट बनाएं और प्रोजेक्ट में नेविगेट करें

ng new my-app --style=scss
cd my-app

बूटस्ट्रैप को स्थापित करना

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

विन्यास परियोजना

एक खाली फ़ाइल बनाएँ _variables.scssमें src/।

यदि आप उपयोग कर रहे हैं bootstrap-sass, तो निम्न जोड़ें _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

में styles.scssनिम्नलिखित जोड़ें:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

परीक्षण परियोजना

app.component.htmlनिम्न मार्कअप खोलें और जोड़ें:

<button class="btn btn-primary">Test Button</button>

कॉन्फ़िगर किए गए एप्लिकेशन के साथ, ng serveअपने एप्लिकेशन को डेवलप मोड में चलाने के लिए चलाएं। अपने ब्राउज़र में एप्लिकेशन पर नेविगेट करें localhost:4200। सत्यापित करें कि बूटस्ट्रैप स्टाइल बटन दिखाई देता है। यह सुनिश्चित करने के लिए कि आपके चर खुले हुए हैं _variables.scssऔर निम्नलिखित जोड़े जाएँ:

$brand-primary: red;

फ़ॉन्ट का रंग बदलने के लिए ब्राउज़र पर लौटें।

Comments

यह समाधान बूटस्ट्रैप के लिए जावास्क्रिप्ट फ़ाइलों को नहीं जोड़ता है, केवल सीएसएस

— रॉबिन वैन डेर कनाप

: यह अन्य कहानी देखें github.com/angular/angular-cli/wiki/stories-global-lib । यह स्क्रिप्ट फ़ाइलों को जोड़ने का वर्णन करता है, एक उदाहरण के रूप में बूटस्ट्रैप 4 ले रहा है।

— रॉबिन वैन डेर कनाप

$brand-primary: red;मेरे लिए काम नहीं किया। हालाँकि, $primary: red;किया!

— जोहान फ्रिक

बूटस्ट्रैप बनाम

— बूस्टर के

Answer 6

अद्यतन v1.0.0-beta.26

आप यहां बूटस्ट्रैप आयात करने के नए तरीके के लिए डॉक्टर पर देख सकते हैं

यदि यह अभी भी काम नहीं करता है, तो कमांड एनजी सर्व के साथ पुनरारंभ करें

1.0.0 या नीचे के संस्करण:

अपनी index.html फ़ाइल में आपको बस बूटस्ट्रैप सीएसएस लिंक (कोई ज़रूरत नहीं js स्क्रिप्ट्स) चाहिए

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

तथा

npm install ng2-bootstrap --save
npm install moment --save

My_project / src / system-config.ts में ng2- बूटस्ट्रैप स्थापित करने के बाद :

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

और my_project / कोणीय-cli-build.js में:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

अपने मॉड्यूल को विक्रेता में रखने के लिए इस आदेश को न भूलें:

ng build

किसी अन्य मॉड्यूल से आयात करने के लिए समान सिद्धांत है।

Comments

यह बूटस्ट्रैप को jquery का उपयोग करने में कैसे सक्षम करता है? मैंने यह किया है और यह काम नहीं करता है।

— mjwrazor

उदाहरण अंत में यह मिला और यह काम किया। मैं यह पता नहीं लगा सका जबकि कुछ समय के लिए।

— mjwrazor

Answer 7

मुझे लगता है कि रिलीज के बाद उपरोक्त तरीके बदल गए हैं, इस लिंक को देखें

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

परियोजना आरंभ करें

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

एनजी-बूटस्ट्रैप और बूटस्ट्रैप स्थापित करें

npm install ng2-bootstrap bootstrap --save

खुले src / app / app.module.ts और जोड़ें

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

कोणीय- cli.json खोलें और शैलियों सरणी में एक नई प्रविष्टि डालें

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

src / app / app.component.html खोलें और जोड़कर सभी कार्यों का परीक्षण करें

<alert type="success">hello</alert>

Comments

अहमद हम्दी से विधि काम करती है, जाहिर तौर पर कोड अपडेट अब हो गया है। समाधान के साथ उनके संदेश को अपडेट किया।

— पीटर

यदि आप बूटस्ट्रैप 4 का उपयोग करना चाहते हैं, तो आपको "npm इंस्टॉल एनजी 2-बूटस्ट्रैप बूटस्ट्रैप --save" को बीई में बदलना होगा "एनपीएम इंस्टॉल करें एनजी 2-बूटस्ट्रैप बूटस्ट्रैप@4.0.0-alpha.6-save" .... पूरी तरह से नहीं। दस्तावेज़ीकरण में स्पष्ट (बूटस्ट्रैप में '' कार्ड के लिए एक खोज करें '') यह जानने के लिए कि क्या यह काम किया है) ... ध्यान दें कि यह वर्तमान में अल्फा 6 है यह कोई संदेह नहीं बदलेगा ... वर्तमान npm निर्देश के लिए बूटस्ट्रैप साइट की जाँच करें

— 72GM

Answer 8

कोणीय 5 में बूटस्ट्रैप 4 के लिए चरण

1. एंगुलर 5 प्रोजेक्ट बनाएं

   एनजी AngularBootstrapTest

2. प्रोजेक्ट डायरेक्टरी में जाएं

   सीडी AngularBootstrapTest

3. बूटस्ट्रैप डाउनलोड करें

   npm बूटस्ट्रैप स्थापित करें

4. प्रोजेक्ट में बूटस्ट्रैप जोड़ें

   ४.१ खुला

   ४.२ को "शैली" अनुभाग में देखें

   4.3 नीचे के रूप में बूटस्ट्रैप सीएसएस पथ जोड़ें

   ।

   "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
   ],

अब आपने अकस्मात 5 प्रोजेक्ट में बूटस्ट्रैप सीएसएस जोड़ दिया है

टेस्ट बूटस्ट्रैप

5. खुला हुआ src/app/app.component.html
6. बूटस्ट्रैप बटन घटक जोड़ें

।

<button type="button" class="btn btn-primary">Primary</button>

आप यहां बटन शैलियों का उल्लेख कर सकते हैं ( https://getbootstrap.com/docs/4.0/compords/buttons/ )

7. फ़ाइल सहेजें

8. प्रोजेक्ट चलाएं

   एनजी की सेवा -

अब आपको पेज में बूटस्ट्रैप स्टाइल बटन दिखाई देगा

नोट: यदि आपने एनजी सर्व करने के बाद बूटस्ट्रैप पथ जोड़ा है , तो आपको परिवर्तनों को प्रतिबिंबित करने के लिए एनजी सर्व को रोकना और पुन: चलाना होगा

Answer 9

चूंकि यह इतना भ्रामक हो गया और यहां के उत्तर पूरी तरह से मिश्रित हैं, मैं बस बीएस 4 के लिए आधिकारिक यूआई-टीम के साथ जाने का सुझाव दूंगा रेपो के (हाँ एनजी-बूटस्ट्रैप के लिए उन रिपो के बहुत सारे हैं।

बस यहां दिए गए निर्देशों का पालन करें https://github.com/ng-bootstrap/ng-bootstrap BS4 प्राप्त करने के लिए।

परिवाद से उद्धरण:

इस लाइब्रेरी को यूआई-बूटस्ट्रैप टीम द्वारा स्क्रैच से बनाया जा रहा है। हम टाइपस्क्रिप्ट का उपयोग कर रहे हैं और बूटस्ट्रैप 4 सीएसएस फ्रेमवर्क को लक्षित कर रहे हैं।

बूटस्ट्रैप 4 के साथ के रूप में, यह पुस्तकालय प्रगति पर काम है। हमारे द्वारा लागू की जा रही सभी चीजों को देखने के लिए मुद्दों की हमारी सूची देखें। वहाँ टिप्पणी करने के लिए स्वतंत्र महसूस करें।

बस इसे चिपकाने के लिए जो कुछ है उसे कॉपी करें:

npm install --save @ng-bootstrap/ng-bootstrap

एक बार स्थापित होने के बाद आपको हमारा मुख्य मॉड्यूल आयात करना होगा:

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

केवल शेष भाग आपके एप्लिकेशन मॉड्यूल में आयातित मॉड्यूल को सूचीबद्ध करने के लिए है। रूट (शीर्ष-स्तरीय) मॉड्यूल के लिए सटीक विधि थोड़ी अलग होगी, जिसके लिए आपको कोड के समान (नोटिस NgbModule.forRoot ()) के साथ समाप्त होना चाहिए:

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

आपके एप्लिकेशन के अन्य मॉड्यूल केवल NgbModule आयात कर सकते हैं:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

यह अब तक का सबसे सुसंगत व्यवहार प्रतीत होता है

Answer 10

1. बूटस्ट्रैप स्थापित करें

   npm install bootstrap@next

2. .Ang-cli.json में कोड जोड़ें:

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

3. अंतिम बार bootstrap.css को अपने कोड style.scss में जोड़ें

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

4. अपने स्थानीय सर्वर को पुनरारंभ करें

Comments

जबकि एनएक्सएक्स-बूटस्ट्रैप उन घटकों के लिए अच्छा है जो इसे समर्थन करते हैं, कभी-कभी आपको अभी भी "देशी" jquery प्लगइन्स का उपयोग करने की आवश्यकता होती है, जैसे तालिकाओं में पतन कार्यक्षमता। फिर आपको अभी भी jquery स्क्रिप्ट को स्पष्ट रूप से आयात करने की आवश्यकता है, जो यह उत्तर दिखाता है।

— क्रिस्टोफ

बिंदु 4 के लिए अपग्रेड किया गया (अपने स्थानीय सर्वर को पुनरारंभ करें) मैं उपयोग कर रहा हूं ---> एनपीएम एनजीएक्स-बूटस्ट्रैप बूटस्ट्रैप --save

— पलानीकुमार

Answer 11

निम्न चरण करें:

1. npm install --save bootstrap

2. और अपने। में- cli.json, स्टाइल सेक्शन में जोड़ें:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]

उसके बाद, आपको अपना एनजी सर्व पुनः आरंभ करना होगा

का आनंद लें

Answer 12

1. Npm का उपयोग करके बूटस्ट्रैप स्थापित करें

   npm install bootstrap

2.Install Popper.js

npm install --save popper.js

3.Goto angular.json कोणीय 6 परियोजना / में .angular-cli.json कोणीय 5 में और सूचीबद्ध जोड़ें:

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Answer 13

इसे इस्तेमाल करे

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Answer 14

आप माइक ब्रोची के इस वीडियो को भी देख सकते हैं जिसमें आपके कोणीय-क्ली उत्पन्न प्रोजेक्ट में बूटस्ट्रैप को जोड़ने के बारे में उपयोगी जानकारी है। https://www.youtube.com/watch?v=obbdFFbjLIU (लगभग 13:00 मिनट)

Answer 15

1. बैश में दौड़ो npm install ng2-bootstrap bootstrap --save
2. निम्नलिखित में जोड़ें / बदलें angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Answer 16

संबंधित प्रोजेक्ट डायरेक्टरी में टर्मिनल / कमांड प्रॉम्प्ट खोलें और निम्न कमांड टाइप करें।

npm install --save bootstrap

फिर .angular-cli.json फ़ाइल खोलें, खोजें

"styles": [ "styles.css" ],

उसे बदलो

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

सब कुछ कर दिया।

Answer 17

अब नए एनजी-बूटस्ट्रैप के साथ 1.0.0-beta.5 संस्करण बूटस्ट्रैप के मार्कअप और सीएसएस के आधार पर अधिकांश मूल कोणीय निर्देशों का समर्थन करता है।

इसके साथ काम करने के लिए आवश्यक एकमात्र निर्भरता है bootstrap। कोई जरूरत नहीं jquery और popper.js निर्भरता का उपयोग करने के लिए ।

एनजी-बूटस्ट्रैप को घटकों के लिए जावास्क्रिप्ट कार्यान्वयन को पूरी तरह से बदलना है। इसलिए आपको शामिल करने की आवश्यकता नहीं हैbootstrap.min.js अपने .angular-cli.json में स्क्रिप्ट अनुभाग में होने की ।

जब आप कोणीय-क्ली नवीनतम संस्करण के साथ उत्पन्न प्रोजेक्ट के साथ बूटस्ट्रैप को एकीकृत कर रहे हों तो इन चरणों का पालन करें।

• Inculde bootstrap.min.cssअपने .angular-cli.json, शैली अनुभाग में।

  "styles": [
     "styles.scss",
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

• एनजी-बूटस्ट्रैप निर्भरता स्थापित करें ।

  npm install --save @ng-bootstrap/ng-bootstrap

• इसे अपने मुख्य मॉड्यूल वर्ग में जोड़ें।

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

• अपने मुख्य मॉड्यूल आयात अनुभाग में निम्नलिखित शामिल करें।

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• यदि आप उन मॉड्यूल कक्षाओं के अंदर एनजी-बूटस्ट्रैप घटकों का उपयोग करने जा रहे हैं, तो अपने उप मॉड्यूल में भी निम्नलिखित करें।

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• अब आपका प्रोजेक्ट उपलब्ध एनजी-बूटस्ट्रैप घटकों का उपयोग करने के लिए तैयार है।

Answer 18

1. बूटस्ट्रैप, popper.js स्थापित करें

npm install --save bootstrap npm install --save popper.js

3. में src / styles.css , आयात बूटस्ट्रैप की शैली

@import '~bootstrap/dist/css/bootstrap.min.css';

Answer 19

Step1:
npm install bootstrap@latest --save-dev यह बूटस्ट्रैप का नवीनतम संस्करण स्थापित करेगा, हालाँकि, निर्दिष्ट संस्करण संस्करण संख्या जोड़कर स्थापित किया जा सकता है

स्टेप 2: स्टाइल्स को खोलें। क्लिक करें और निम्न जोड़ें @import "~bootstrap/dist/css/bootstrap.css"

Comments

ज्यादातर वर्तमान सबसे अच्छा उत्तर हटाए जाने को छोड़कर - सेव-देव। जैसा कि आप अपने ऐप के साथ बूटस्ट्रैप को तैनात करना चाहते हैं।

— सिडवेल

Answer 20

बूटस्ट्रैप और Jquery दोनों को जोड़ने के लिए

npm install bootstrap@3 jquery --save

इस आदेश को चलाने के बाद, कृपया आगे बढ़ें और अपने नोड_मॉडल फ़ोल्डर की जांच करें जिसे आपको बूटस्ट्रैप और इसमें जोड़े गए जोड़ को देखने में सक्षम होना चाहिए।

Comments

साथ ही जकुरी को ठंडा करके मिलाएं।

— सूर्या आर प्रवीण

Answer 21

angular-cliअब आपके पास एक समर्पित विकी पृष्ठ है जहाँ आप अपनी ज़रूरत की हर चीज़ पा सकते हैं। TLDR, के bootstrapमाध्यम से स्थापित करें npmऔर अपनी .angular-cli.jsonफ़ाइल में "शैलियों" अनुभाग के लिंक शैलियों को जोड़ें

Answer 22

कोणीय-क्ले और सीएसएस का उपयोग करने के मामले में काम करने का उदाहरण:

1. बूटस्ट्रैप की स्थापना करें

npm बूटस्ट्रैप टेदर jquery --save स्थापित करें

2.dd to .angular-cli.json

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

Answer 23

एनपीएम का उपयोग करके बूस्टरैप स्थापित करें

npm install boostrap@next --save

उसके बाद अपने नोड_मॉडल फोल्डर को बूस्टराप के लिए जांचें। एससीएस फाइल (डिस्टर्ब के भीतर) आमतौर पर रास्ता है

"../node_modules/bootstrap/dist/css/bootstrap.css",

इस पथ जोड़ें | style.css या style.scss के भीतर आयात को बढ़ावा देना

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

बस।

Comments

शैली सरणी में इसे डालने के बारे में क्या angular-cli.json? परिचारिका नहीं?

— कोड़ीबगस्टीन

नहीं यह जरूरी नहीं है। चूँकि हम अपनी style.css फ़ाइल को उस ऐरे में शामिल करते हैं। हम अपनी शैली में अन्य सीएसएस फ़ाइलें आयात कर सकते हैं। स्टाइल या स्टाइल। एससीएस "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "..node_modules/bootstrap/dist/css/ /bootstrap.css ";

— चनाका फर्नांडो

आह ठीक है .. लेकिन मुझे लगता है कि इसमें शामिल angular-cli.jsonहै शायद बेहतर है

— CodyBugstein

@CodyBugstein मुझे यकीन नहीं है कि यह आवश्यक रूप से "बेहतर" है इसे .angular-cli.json में जोड़ने के लिए। यहां कुछ कारण दिए गए हैं कि आप अपनी शैलियों में आयात क्यों जोड़ना चाहते हैं। एससीएस फाइल: 1) आप यहां बूटस्वाच उदाहरण की तरह बूटस्ट्रैप थीम को आसानी से लागू कर सकते हैं: github.com/thomaspark/bootswatch 2) संपादन .json फ़ाइलें अधिक बोझिल हैं। संपादन .scss फ़ाइलों की वजह से .json फ़ाइलें टिप्पणियों की अनुमति नहीं देती हैं, और 3) नए डेवलपर्स सभी सीएसएस के बजाय। के बजाय एक प्रारंभिक बिंदु के रूप में style.scss को देख सकते हैं।

— कीथ

Answer 24

प्रोजेक्ट के अंदर यह निम्न आदेश चलाएँ

npm install --save @bootsrap@4

और अगर आपको इस तरह की पुष्टि मिलती है

+ bootstrap@4.1.3
updated 1 package in 8.245s

इसका मतलब है कि बूस्टर 4 सफलतापूर्वक स्थापित है। हालांकि, इसका उपयोग करने के लिए, आपको कोणीय.json फ़ाइल के तहत "शैलियों" सरणी को अपडेट करने की आवश्यकता है।

इसे निम्न तरीके से अपडेट करें ताकि बूटस्ट्रैप मौजूदा शैलियों को ओवरराइड कर सके

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
           "src/styles.css"
          ],

यह सुनिश्चित करने के लिए कि सब कुछ सही तरीके से सेट किया गया है, चलाएं ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, फिर आप बूस्टर का उपयोग करने के लिए अच्छे हैं।

Answer 25

यहाँ यह नहीं देखा:

@import 'bootstrap/scss/bootstrap.scss';

मैंने अभी इस लाइन को style.scss में जोड़ा है मेरे मामले में मैं बूटस्ट्रैप चर को भी ओवरराइड करना चाहता था।

Answer 26

यदि आपने अभी कोणीय और बूटस्ट्रैप के साथ शुरुआत की है तो सरल उत्तर चरणों से नीचे होगा: 1. देव निर्भरता के रूप में बूटस्ट्रैप का नोड पैकेज जोड़ें

npm install --save bootstrap

2. आयात bootstrap angular.json फ़ाइल में स्टाइलशीट।

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. और आप स्टाइलिंग, ग्रिड आदि के लिए बूटस्ट्रैप का उपयोग करने के लिए तैयार हैं।

   <div class="container">My first bootstrap div</div>

इसका सबसे अच्छा हिस्सा जो मुझे मिला वह यह था कि हम बिना किसी तीसरे पक्ष के मॉड्यूल निर्भरता के बूटस्ट्रैप का उपयोग कर निर्देशित कर रहे हैं। हम कभी भी कमांड npm install --save bootstrap@4.4आदि को अपडेट करके बूटस्ट्रैप को अपग्रेड कर सकते हैं ।

Answer 27

आपके पास अपने कोणीय प्रोजेक्ट में बूटस्ट्रैप 4 जोड़ने के कई तरीके हैं :

• एक और टैग के साथ अपने कोणीय परियोजना के index.html फ़ाइल के अनुभाग में बूटस्ट्रैप सीएसएस और जावास्क्रिप्ट फ़ाइलों को शामिल करना,

• वैश्विक शैलियों में बूटस्ट्रैप सीएसएस फ़ाइल आयात करना। एक @import कीवर्ड के साथ अपने कोणीय प्रोजेक्ट की फ़ाइल।

• अपने प्रोजेक्ट के कोणीय.जॉन फ़ाइल की शैलियों और स्क्रिप्ट सरणियों में बूटस्ट्रैप सीएसएस और जावास्क्रिप्ट फ़ाइलों को जोड़ना

Answer 28

यह आदेश चलाएँ

npm install bootstrap@3

आपका Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Answer 29

आप का उपयोग कर कोणीय में बूटस्ट्रैप स्थापित कर सकते हैं npm install bootstrap कमांड ।

और angular.jsonफ़ाइल में अगला सेटअप बूटस्ट्रैप पथ औरstyle.css फ़ाइल ।

आप कोणीय में बूटस्ट्रैप कैसे स्थापित करें और कैसे स्थापित करें , इसके बारे में पूरा ब्लॉग पढ़ सकते हैं , इस बारे में पूरा ब्लॉग पढ़ने के लिए यहां क्लिक करें

Answer 30

कोणीय-क्ली का उपयोग करने के मामले में एक कार्यशील उदाहरण:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

सीएसएस और एससीएस के लिए काम करता है। बूटस्ट्रैप v3 और v4 उपलब्ध हैं।

बूटस्ट्रैप-स्कीमैटिक्स के बारे में अधिक जानकारी कृपया यहां पाएं ।