เป็นวิธีที่ดีที่สุดในการลบองค์ประกอบด้วย CLI อะไร

ฉันพยายามใช้ "ng destroy component foo" และมันบอกฉันว่า "Angular-CLI ไม่รองรับคำสั่ง destroy"

เราจะลบส่วนประกอบอย่างถูกต้องด้วย Angular CLI ได้อย่างไร

destroyหรือบางสิ่งที่คล้ายคลึงกันอาจมาถึง CLI แต่ตอนนี้ไม่ได้เป็นจุดสนใจหลัก ดังนั้นคุณจะต้องทำด้วยตนเอง

ลบไดเรกทอรีองค์ประกอบ (สมมติว่าคุณไม่ได้ใช้--flat) จากนั้นลบออกจากไดเรกทอรีที่NgModuleประกาศ

หากคุณไม่แน่ใจว่าต้องทำอะไรฉันขอแนะนำให้คุณใช้แอพ "สะอาด" ซึ่งไม่มีgitการเปลี่ยนแปลงในปัจจุบัน จากนั้นสร้างองค์ประกอบและดูว่ามีอะไรเปลี่ยนแปลงใน repo เพื่อให้คุณสามารถย้อนกลับไปจากที่นั่นสิ่งที่คุณจะต้องทำเพื่อลบองค์ประกอบ

ปรับปรุง

หากคุณเพิ่งทดลองเกี่ยวกับสิ่งที่คุณต้องการสร้างคุณสามารถใช้การ--dry-runตั้งค่าสถานะเพื่อไม่สร้างไฟล์ใด ๆ บนดิสก์เพียงแค่ดูรายการไฟล์ที่อัปเดต

1. ลบโฟลเดอร์ที่มีส่วนประกอบนี้
2. ใน app.module.ts ลบข้อความสั่งการนำเข้าสำหรับคอมโพเนนต์นี้และลบชื่อออกจากส่วนการประกาศของ @NgModule
3. ลบบรรทัดที่มีคำสั่งการส่งออกสำหรับส่วนนี้จาก index.ts

เนื่องจากยังไม่รองรับการใช้งานเชิงมุม CLI

ดังนั้นนี่คือวิธีที่เป็นไปได้ก่อนหน้านั้นโปรดสังเกตสิ่งที่เกิดขึ้นเมื่อคุณสร้างส่วนประกอบ / บริการโดยใช้ CLI (เช่นng g c demoComponent)

1. มันสร้างโฟลเดอร์แยกชื่อdemoComponent( ng g c demoComponent)
2. มันสร้างHTML,CSS,tsและspecไฟล์ที่อุทิศให้กับ demoComponent
3. นอกจากนี้ยังเพิ่มการพึ่งพาภายในไฟล์ app.module.ts เพื่อเพิ่มองค์ประกอบนั้นในโครงการของคุณ

ดังนั้นทำในลำดับย้อนกลับ

1. ลบการพึ่งพาจาก app.module.ts
2. ลบโฟลเดอร์คอมโพเนนต์นั้น

เมื่อลบการพึ่งพาคุณต้องทำสองสิ่ง

1. ลบการอ้างอิงสายการนำเข้าจากไฟล์ app.module.ts
2. ลบการประกาศส่วนประกอบจาก @NgModule array การประกาศใน app.module.ts

ใช้รหัส Visual Studio ลบโฟลเดอร์คอมโพเนนต์และดูใน Project Explorer (ด้านซ้ายมือ) ไฟล์ที่มีสีแดงซึ่งหมายความว่าไฟล์ได้รับผลกระทบและเกิดข้อผิดพลาด เปิดแต่ละไฟล์และลบรหัสที่ใช้องค์ประกอบ

ปัจจุบัน Angular CLI ไม่สนับสนุนตัวเลือกในการลบส่วนประกอบคุณต้องทำด้วยตนเอง

1. ลบการอ้างอิงการนำเข้าสำหรับทุกองค์ประกอบจาก app.module
2. ลบโฟลเดอร์คอมโพเนนต์
3. คุณต้องลบการประกาศส่วนประกอบจาก @NgModule array การประกาศในไฟล์ app.module.ts

ฉันเขียนสคริปต์ทุบตีที่ควรทำให้กระบวนการเขียนโดย Yakov Fain ด้านล่างโดยอัตโนมัติ มันสามารถถูกเรียกเช่น. / 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

ฉันไม่แน่ใจว่ามันเป็นวิธีที่ดีที่สุดหรือเปล่า แต่ก็ใช้ได้กับฉัน

• ก่อนอื่นฉันลบโฟลเดอร์องค์ประกอบ
• จากนั้นฉันล้างข้อมูล app.module.ts, app.component.ts & app.component.html ที่เกี่ยวข้องกับองค์ประกอบที่ฉันต้องการลบ
• ฉันได้ล้าง main.ts.

ฉันเพิ่งบันทึกและรีเฟรชแอปและใช้งานได้

คำตอบสำหรับ Angular 2+

ลบส่วนประกอบ from imports and declaration arrayของ app.modules.ts

ตรวจสอบที่สองการอ้างอิงของมันจะถูกเพิ่มในโมดูลอื่น ๆ ถ้าใช่แล้วลบออก

ในที่สุดdelete that component Manuallyจากแอพและคุณก็ทำเสร็จแล้ว

หรือคุณสามารถทำมันในลำดับย้อนกลับได้

จาก app.module.ts:

• ลบบรรทัดการนำเข้าสำหรับส่วนประกอบเฉพาะ
• ลบการประกาศจาก @NgModule;

แล้วลบโฟลเดอร์ของส่วนประกอบที่คุณต้องการลบและไฟล์รวมของ ( .component.ts, .component.html, .component.cssและ.component.spec.ts)

เสร็จสิ้น

-

ฉันอ่านคนพูดเกี่ยวกับการลบมันจาก main.ts คุณไม่ควรนำเข้าจากที่นั่นเป็นอันดับแรกเนื่องจากมีการนำเข้า AppModule อยู่แล้วและ AppModule เป็นการนำเข้าส่วนประกอบทั้งหมดที่คุณสร้างขึ้น

ฉันต้องการลบ Angular 6 directive ซึ่งไฟล์ spec นั้นผิดพลาด แม้หลังจากลบไฟล์ที่ละเมิดออกแล้วให้ลบการอ้างอิงทั้งหมดไปยังแอปนั้นและสร้างแอปขึ้นใหม่ แต่ TS ก็ยังรายงานข้อผิดพลาดเดิมอยู่ สิ่งที่ใช้ได้ผลสำหรับฉันคือการเริ่มต้น Visual Studio ใหม่ - นี่เป็นการล้างข้อผิดพลาดและร่องรอยทั้งหมดของคำสั่งที่ไม่พึงประสงค์เก่า

ก่อนอื่นให้ลบโฟลเดอร์องค์ประกอบที่คุณต้องลบแล้วลบรายการที่คุณได้ทำในไฟล์ "ts"

หากคุณกำลังมองหาคำสั่งบางอย่างใน CLI ดังนั้น ans จะไม่ใช่ตอนนี้ แต่คุณสามารถทำได้ด้วยตนเองโดยการลบโฟลเดอร์คอมโพเนนต์และการอ้างอิงทั้งหมด

Angular CLI นี้ไม่ได้รับการสนับสนุนและพวกเขาไม่จำเป็นต้องรวมไว้ในเวลาใด ๆ

นี่คือลิงค์ไปสู่ปัญหาที่สร้างขึ้นจริง - https://github.com/angular/angular-cli/issues/1776

และภาพหน้าจอของการแก้ปัญหาจากเจ้าหน้าที่ -