कोणीय-क्लि जहां webpack.config.js फ़ाइल है - नया कोणीय 6 एनजी बेदखल करने का समर्थन नहीं करता है

Question

अद्यतन: दिसंबर 2018 ('अनिकेत' उत्तर देखें)

कोणीय सीएलआई 6 के साथ आपको बिल्डरों का उपयोग करने की आवश्यकता है क्योंकि एनजे को हटा दिया गया है और जल्द ही 8.0 में हटा दिया जाएगा

अद्यतन: जून 2018: कोणीय 6 एनजी बेदखल करने का समर्थन नहीं करता है **

अद्यतन: फरवरी 2017: एनजी बेदखल का उपयोग करें

अद्यतन: नवंबर 2016: कोणीय-क्लि अब केवल वेबपैक का उपयोग करते हैं। आपको केवल npm इंस्टॉल -g कोणीय-क्ली के साथ सामान्य रूप से इंस्टॉल करना होगा। "हमने SystemJS से Webpack तक बीटा 10 और बीटा.14 के बीच बिल्ड सिस्टम को बदल दिया है।", लेकिन वास्तव में मैं कोणीय संरचना का उपयोग केवल संरचना और फ़ोल्डरों को फ़िर से करने के लिए करता हूं और फिर अब, मैं मैन्युअल रूप से वेबपैक कॉन्फ़िगरेशन का उपयोग करता हूं

मैंने इसके साथ कोणीय क्लि स्थापित किया है:

npm install -g angular-cli@webpack

जब मैंने कोणीय 1 और वेब पैक के साथ काम किया, तो मैं सभी कार्य और प्लगइन्स को निष्पादित करने के लिए "webpack.config.js" फ़ाइल को संशोधित करता था, लेकिन मैं कोणीय-क्ली के साथ बनाई गई इस परियोजना पर नहीं देखता हूं जो इसे काम करता है। यह जादू है?

मैं देखता हूं कि जब मैं करता हूं तो वेबपैक काम कर रहा है:

ng serve 

"Version: webpack 2.1.0-beta.18"

लेकिन मुझे यह समझ में नहीं आता है कि कोणीय-क्लि कॉन्फिग काम करता है ...

Comments

यह angular2 में बनाया गया है cli पर जोड़ता है। कोई जादू नहीं बस सरलीकृत।

— जोरावर सिंह

धन्यवाद @MrJSingh, लेकिन क्या अभी तक एक config फाइल है? या बस कोणीय-cli.json के साथ काम करता है? मैं और अधिक विन्यास प्लगइन्स की जरूरत नहीं है?

— स्टैकडैव

यह AT: node_modules \ @ngtools

— bharatpatel

कोणीय 6.0.8 वर्तमान में समर्थन नहीं करता हैng eject

— रॉबर्ट लव

मुझे पसंद है कि कैसे पोस्ट करने के लगभग एक साल बाद ओपी सही उत्तर को अपडेट कर रहा है।

— चमकदार

Answer 1

कोणीय सीएलआई 6 के साथ आपको बिल्डरों का उपयोग करने की आवश्यकता है क्योंकि एनजे बेदखल है और जल्द ही 8.0 में हटा दिया जाएगा। जब मैं एनजी इजेक्शन करने की कोशिश करता हूं तो यही कहता है

आप अपने कस्टम कस्टम पैकेज को प्रदान करने के लिए कोणीय-बिल्डरों पैकेज ( https://github.com/meltedspark/angular-builders ) का उपयोग कर सकते हैं ।

मैंने अपने ब्लॉग पर एक ही ब्लॉग पोस्ट में सभी को संक्षेप में प्रस्तुत करने की कोशिश की है - एंग्लो सीएलआई 6 में कस्टम वेबपैक कॉन्फ़िगरेशन के साथ बिल्ड कॉन्फ़िगरेशन को कैसे अनुकूलित करें

लेकिन अनिवार्य रूप से आप निम्न निर्भरताएँ जोड़ते हैं -

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

में angular.json मेकअप निम्न परिवर्तन -

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

बिल्डर और नए विकल्प customWebpackConfig में सूचना परिवर्तन। भी बदलो

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

सर्विस टारगेट के लिए बिल्डर में फिर से बदलाव देखें। इन परिवर्तनों को पोस्ट करें आप कस्टम-वेबपैक .config.js नामक एक फ़ाइल बना सकते हैं अपनी उसी निर्देशिका में अपने जोड़ सकते हैं।

हालाँकि, एनजी इजेक्ट कॉन्फ़िगरेशन के विपरीत, यहां दिए गए डिफ़ॉल्ट कॉन्फिगरेशन को मर्ज कर दिया जाएगा ताकि आप केवल वह सामग्री जोड़ें जिसे आप संपादित करना / जोड़ना चाहते हैं।

Comments

अच्छा लगा। वेबपैक कॉन्फिग में ट्वीक करने की विधि को कोणीय डॉक्स में वर्णित किया जाना चाहिए। यह मेरे जैसे नए लोगों की मदद करता है।

— वजाहत

यह कोणीय-बिल्डरों का सेटअप मेरे लिए काम नहीं करता है, ng serveबस 5 सेकंड के बाद बिना आउटपुट के बाहर निकल जाता है। मेरी परियोजना कोणीय cli 7 और कोणीय कोर 5 का उपयोग करती है

— tedw

क्या मुझे पैकेज.जॉन की scriptsसंपत्ति में कोई बदलाव करना है ?

— कृष्ण प्रसट

ध्यान दें कि, कोणीय 8 के लिए कोणीय-बिल्डरों के संस्करण में, " @angular-builders/dev-server:genericहटा दिया गया है। @angular-builders/custom-webpack:dev-serverइसके बजाय उपयोग करें ।" क्या आप इस उत्तर को प्रतिबिंबित करने के लिए अपडेट कर सकते हैं?

— ब्रायन मैककिनटन

github.com/just-jeb/angular-builders/tree/master/packages/... - इसके लिए बहुत ही सरल निर्देश ... - Angular 9 Universal Ivy में काम करता है

— जोनाथन

Answer 2

वहाँ एक अच्छा तरीका है कोणीय- cli से webpack.config.js बेदखल करना है । बस दौडो:

$ ng eject

यह आपके प्रोजेक्ट के रूट फ़ोल्डर में webpack.config.js उत्पन्न करेगा, और आप इसे जिस तरह से चाहते हैं, उसे कॉन्फ़िगर करने के लिए स्वतंत्र हैं। इसका नकारात्मक पक्ष यह है कि अपने पैकेज में स्क्रिप्ट का निर्माण / शुरुआत करें। इसे नए कमांड के बजाय बदल दिया जाएगा

$ ng serve

आपको कुछ ऐसा करना होगा

$ npm run build & npm run start

इस पद्धति को कोणीय -क्ली के सभी हाल के संस्करणों में काम करना चाहिए (मैंने व्यक्तिगत रूप से कुछ कोशिश की, सबसे पुराना 1.0.0-beta.21 और नवीनतम 1.0.0-beta.32.3 के साथ )

Comments

केवल निराशा यह है कि यह केवल देव पर्यावरण विन्यास को खारिज करता है। एक तर्क है कि आप उत्पादन विन्यास का उपयोग करने के लिए एनजी बेदखल के बजाय जोड़ सकते हैं, लेकिन यह वर्तमान में काम नहीं करता है github.com/angular/angular-cli/issues/5433

— jtsnr

@bebebe github.com/angular/angular-cli/issues/4907 मैंने सुनिश्चित करने के लिए कहा है।

— कुनेप्रो

@bebebe कृपया यहां देखें stackoverflow.com/questions/42984558/…

— एंटोन निकिफोरोव

@AntonNikiforov बेदखल करने के बाद वेबपैक को कैसे कॉन्फ़िगर करें? मुझे लगता है कि webpack config फाइल इतनी जटिल लगती है। इसका कारण यह है कि मैं इसे अस्वीकार कर देता हूं क्योंकि मैं अपनी परियोजना में पोस्टक का उपयोग करना चाहता हूं, लेकिन अभी इसका समर्थन नहीं करता है।

— एनजी 2-फन

एनजी बिल्ड -w कैसे चलाएं? npm रन बिल्ड -w काम नहीं करता है, एनजी बिल्ड के लिए समान है - निर्माण और एनजी बिल्ड -d "कुछ" के लिए

— विक्टर ब्रेडिहिन

Answer 3

इस मुद्दे के अनुसार , यह उपयोगकर्ताओं को सीखने की अवस्था को कम करने के लिए वेबपैक कॉन्फ़िगरेशन को संशोधित करने की अनुमति नहीं देने के लिए एक डिज़ाइन निर्णय था।

वेबपैक पर उपयोगी विन्यास की संख्या को ध्यान में रखते हुए, यह एक बड़ी कमी है।

मैं angular-cliउत्पादन अनुप्रयोगों के लिए उपयोग करने की सिफारिश नहीं करूंगा , क्योंकि यह अत्यधिक राय है।

Comments

इसकी सलाह दी जाती है कि जब तक आप आर्किटेक्चर के हर प्रवाह को नहीं समझते हैं, तब तक ब्लैकबॉक्स में प्रवेश न करें, यह बहुत महंगा हो सकता है यदि कुछ का समर्थन नहीं किया जाता है या परियोजना के विकास के बीच में अनुकूलित नहीं किया जा सकता है।

— इग्नाटियस एंड्रयू

Answer 4

CLI के वेबपैक कॉन्फिग को अब निकाला जा सकता है। एंटन निकिफोरोव के जवाब की जाँच करें ।

---

रगड़ा हुआ:

आप में कॉन्फ़िगर टेम्पलेट हैक कर सकते हैं angular-cli/addon/ng2/models। अब वेबपैक कॉन्फिगरेशन को संशोधित करने का कोई आधिकारिक तरीका नहीं है।

इस बारे में github पर एक बंद "अभ्यस्त-फिक्स" मुद्दा है: https://github.com/angular/angular-cli/issues/1656

Comments

अंत में मैं इस कंकाल का उपयोग करता हूं, कोणीय-क्लि वेबपैक के साथ वास्तविक काम के लिए तैयार नहीं है, बहुत सारी समस्याएं हैं। मैं इसे इस्तेमाल करने की सलाह देता हूं: github.com/webpack/webpack-dev-server

— stackdave

मैं दुखी हूं, मुद्दा "बंद नहीं होगा" के रूप में बंद है। :-(

— मोननेफ

वहाँ भी npmjs.com/~ngtools है जहाँ आप CLI स्टैंडअलोन चलाने वाले वेबपैक प्राप्त कर सकते हैं। देखें youtu.be/uBRK6cTr4Vk?t=7m57s

— Mikeumus

Answer 5

मैं जो सोच रहा हूं कि वेबपैक आसान होगा जब प्रोडक्शन रिलीज होगा।

FYI करें: https://github.com/Piusha/ngx-lazyloading

Answer 6

ng ejectआप के सुझाव के अनुसार उपयोग कर सकते हैंngx-build-plus

कई परियोजनाएं हैं जो नए कॉन्फ़िगरेशन प्रारूप के साथ संयोजन में उपयोग की जा सकती हैं जो रखरखाव ओवरहेड के बिना बेदखल करने के लाभ प्रदान करती हैं। ऐसा ही एक प्रोजेक्ट ngx-build-plus है जो यहां पाया गया: https://github.com/manfredsteyer/ngx-build-plus