सीएलआई के साथ एक घटक को हटाने का सबसे अच्छा तरीका क्या है


227

मैंने "एनजी नष्ट घटक फू" का उपयोग करने की कोशिश की और यह मुझे बताता है "विनाश कमांड कोणीय-सीएलआई द्वारा समर्थित नहीं है"

हम कोणीय सीएलआई के साथ घटकों को ठीक से कैसे हटाते हैं?


2
यह अभी तक सीएलआई के साथ समर्थित नहीं है, हालांकि अगर आपने यह सुनिश्चित कर लिया है कि पुराने बदलाव घटक बनाने से पहले किए गए हैं, तो आप नई फ़ाइलों को हटा सकते हैं, और बदले हुए लोगों (या सिर्फ git checkout src) पर गिट चेकआउट कर सकते हैं ।
संजय वर्मा

यह एक चतुर हैक है। यह सुनिश्चित करने के लिए काम करता है। भाषा टीम को इस मुद्दे को जल्द या बाद में संबोधित करना होगा। मुझे लगता है कि वे वर्तमान में अन्य मुद्दों के साथ व्यस्त हैं। लेकिन मुझे लगता है कि इस समय हमें आपके समाधान के साथ रहना होगा। इसे उत्तर के रूप में पोस्ट करें। @ संजय वर्मा
अमन

जवाबों:


167

destroyया ऐसा ही कुछ सीएलआई में आ सकता है, लेकिन यह इस समय प्राथमिक फोकस नहीं है। तो आपको इसे मैन्युअल रूप से करने की आवश्यकता होगी।

घटक निर्देशिका को हटा दें (यह मानते हुए कि आपने उपयोग नहीं किया था --flat) और फिर उसे हटा दें NgModuleजिसमें यह घोषित किया गया है।

यदि आप इस बारे में अनिश्चित हैं कि क्या करना है, तो मेरा सुझाव है कि आपके पास "क्लीन" ऐप है जिसका अर्थ है कोई वर्तमान gitपरिवर्तन नहीं। फिर एक कंपोनेंट जेनरेट करें और देखें कि रेपो में क्या बदलाव किया गया है ताकि आप वहां से पीछे हट सकें कि आपको कंपोनेंट हटाने के लिए क्या करना होगा।

अपडेट करें

यदि आप बस इस बारे में प्रयोग कर रहे हैं कि आप क्या उत्पन्न करना चाहते हैं, तो आप --dry-runडिस्क का उपयोग डिस्क पर किसी भी फाइल का निर्माण नहीं करने के लिए कर सकते हैं , बस अद्यतन की गई फ़ाइल सूची देखें।


132
  1. इस घटक वाले फ़ोल्डर को हटा दें।
  2. App.module.ts में इस घटक के लिए आयात विवरण को हटा दें और @NgModule के घोषणा अनुभाग से उसका नाम हटा दें
  3. Index.ts से इस घटक के लिए निर्यात विवरण के साथ लाइन निकालें।

12
कहाँ है index.ts? धन्यवाद
शेन जी

40
सीएलआई के नवीनतम संस्करणों में वे इसे उत्पन्न नहीं करते हैं।
याकॉव फेन

7
मुझे लगता है कि एक और कदम याद आ रहा है ... फिर से एनजी सर्व करें, है ना?
gsalgadotoledo

index.ts? 5 में नहीं
एंड्रयू कोपर

2
Angular6 में, app-routing.module.ts से आयात विवरण को हटाने की जरूरत है
tyro

26

चूंकि यह अभी तक कोणीय सीएलआई का उपयोग करके समर्थित नहीं है

इसलिए यहां संभव तरीका है, इससे पहले कृपया देखें कि क्या होता है जब आप सीएलआई (पूर्व ng g c demoComponent) का उपयोग करके एक घटक / सेवा बनाते हैं ।

  1. यह नाम demoComponent( ng g c demoComponent) नाम से एक अलग फ़ोल्डर बनाता है ।
  2. यह जनरेट करता है HTML,CSS,tsऔर एक specफाइल जो डेमोकेमपेंट को समर्पित है।
  3. इसके अलावा, यह आपके प्रोजेक्ट में उस घटक को जोड़ने के लिए app.module.ts फ़ाइल के अंदर निर्भरता जोड़ता है।

इसलिए इसे उल्टे क्रम में करें

  1. निर्भरता को दूर करें app.module.ts
  2. उस घटक फ़ोल्डर को हटा दें।

निर्भरता को दूर करते समय आपको दो काम करने होंगे।

  1. App.module.ts फ़ाइल से आयात लाइन संदर्भ निकालें।
  2. AppNodule.ts में @NgModule घोषणा सरणी से घटक घोषणा निकालें।

11

विज़ुअल स्टूडियो कोड का उपयोग करके, घटक फ़ोल्डर को हटा दें और प्रोजेक्ट एक्सप्लोरर (बाएं हाथ की ओर) फ़ाइलों को देखें जो लाल रंग का अर्थ है कि फाइलें प्रभावित होती हैं और त्रुटियों का उत्पादन करती हैं। प्रत्येक फ़ाइलों को खोलें और घटक का उपयोग करने वाले कोड को हटा दें।


11

वर्तमान में कोणीय सीएलआई घटक को हटाने के लिए एक विकल्प का समर्थन नहीं करता है, आपको इसे मैन्युअल रूप से करने की आवश्यकता है।

  1. App.module से हर घटक के लिए आयात संदर्भ निकालें
  2. घटक फ़ोल्डर हटाएँ।
  3. आपको app.odule.ts फ़ाइल में @NgModule घोषणा सरणी से घटक घोषणा को हटाने की भी आवश्यकता है

5

मैंने एक बैश स्क्रिप्ट लिखी है जिसे नीचे याकॉव फेन द्वारा लिखित प्रक्रिया को स्वचालित करना चाहिए। इसे जैसे कहा जा सकता है ।/removeComponent myComponentName यह केवल Angular 6 के साथ परीक्षण किया गया है

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Input a component to delete"
    exit 1
fi

# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf

# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts

componentName=$1
componentName+="Component"

grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts

कृपया इसे बदलने के लिए मेरे लिए एक नोट जोड़ें यदि भविष्य में कोणीय क्लि में परिवर्तन होता है
ऐदन ग्रिम्सहॉव

3

मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है, लेकिन इसने मेरे लिए काम किया।

  • सबसे पहले, मैंने घटक फ़ोल्डर को हटा दिया।
  • फिर, मैंने app.module.ts, app.component.ts और app.component.html को मंजूरी दे दी, जो कि मैं उस घटक से संबंधित आयात और घोषणाओं से हटाना चाहता था।
  • इसी तरह, मैंने main.ts को मंजूरी दे दी।

मैंने सिर्फ ऐप को सेव और रिफ्रेश किया और यह काम कर गया।


3

2 + के लिए जवाब दें

from imports and declaration arrayApp.modules.ts के घटक निकालें ।

दूसरा चेक इसके संदर्भ को अन्य मॉड्यूल में जोड़ा जाता है, यदि हाँ तो इसे हटा दें और

अंत delete that component Manuallyमें एप्लिकेशन से और आप कर रहे हैं।

या आप इसे उल्टे क्रम में भी कर सकते हैं।


2

App.module.ts से:

  • विशिष्ट घटक के लिए आयात लाइन मिटा;
  • @NgModule से इसकी घोषणा को मिटा दें;

तब घटक आप हटाना और उसके शामिल फ़ाइलों करना चाहते हैं फ़ोल्डर हटाना ( .component.ts, .component.html, .component.cssऔर .component.spec.ts)।

किया हुआ।

-

मैंने लोगों को मुख्य से इसे मिटाने के बारे में कहते हुए पढ़ा। आप इसे पहली जगह में वहाँ से आयात करने वाले नहीं थे क्योंकि यह पहले से ही AppModule का आयात करता है, और AppModule आपके द्वारा बनाए गए सभी घटकों को आयात करने वाला है।


2

मुझे एक कोणीय 6 निर्देश को हटाने की आवश्यकता थी जिसकी कल्पना फ़ाइल गलत थी। यहां तक ​​कि आपत्तिजनक फाइलों को हटाने, उसके सभी संदर्भों को हटाने और एप्लिकेशन के पुनर्निर्माण के बाद भी, TS अभी भी उसी त्रुटि की रिपोर्ट कर रहा था। मेरे लिए जो काम किया गया वह विज़ुअल स्टूडियो को फिर से शुरू कर रहा था - इससे पुराने अवांछित निर्देश की त्रुटि और सभी निशान साफ ​​हो गए।


0

सबसे पहले, घटक फ़ोल्डर को हटा दें, जिसे आपको हटाना है और फिर इसकी प्रविष्टियों को हटा दें जो आपने "ts" फ़ाइलों में बनाई हैं।


0

यदि आप CLI में कुछ कमांड खोज रहे हैं, तो ans अभी के लिए NO है। लेकिन आप घटक फ़ोल्डर और सभी संदर्भों को हटाकर मैन्युअल रूप से कर सकते हैं ।


0

यह कोणीय सीएलआई द्वारा समर्थित नहीं है और वे किसी भी समय इसे जल्द ही शामिल करने के मूड में नहीं हैं।

यहाँ वास्तविक निर्मित मुद्दे की कड़ी है - https://github.com/angular/angular-cli/issues/1776

और अधिकारियों से समाधान का एक स्क्रीनशॉट - यहां छवि विवरण दर्ज करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.