Cách tốt nhất để xóa một thành phần với CLI là gì

Tôi đã thử sử dụng "ng hủy thành phần foo" và nó cho tôi biết "Lệnh hủy không được hỗ trợ bởi Angular-CLI"

Làm thế nào để chúng ta xóa đúng các thành phần với Angular CLI?

destroyhoặc một cái gì đó tương tự có thể đến với CLI, nhưng nó không phải là trọng tâm chính tại thời điểm này. Vì vậy, bạn sẽ cần phải làm điều này bằng tay.

Xóa thư mục thành phần (giả sử bạn không sử dụng --flat) và sau đó xóa nó khỏi thư mục NgModuleđược khai báo.

Nếu bạn không chắc chắn phải làm gì, tôi khuyên bạn nên có một ứng dụng "sạch" nghĩa là không có gitthay đổi hiện tại . Sau đó tạo một thành phần và xem những gì được thay đổi trong repo để bạn có thể quay lại từ đó những gì bạn sẽ cần phải làm để xóa một thành phần.

Cập nhật

Nếu bạn chỉ đang thử nghiệm những gì bạn muốn tạo, bạn có thể sử dụng --dry-runcờ để không tạo bất kỳ tệp nào trên đĩa, chỉ cần xem danh sách tệp được cập nhật.

1. Xóa thư mục chứa thành phần này.
2. Trong app.module.ts xóa câu lệnh nhập cho thành phần này và xóa tên của nó khỏi phần khai báo của @NgModule
3. Xóa dòng có câu lệnh xuất cho thành phần này khỏi index.ts.

Vì nó chưa được hỗ trợ bằng CLI góc

Vì vậy, đây là cách có thể, trước đó, vui lòng quan sát điều gì xảy ra khi bạn tạo một thành phần / dịch vụ bằng CLI (ví dụ ng g c demoComponent).

1. Nó tạo một thư mục riêng có tên demoComponent( ng g c demoComponent).
2. Nó tạo HTML,CSS,tsvà một spectệp dành riêng cho demoComponent.
3. Ngoài ra, Nó thêm phụ thuộc vào tệp app.module.ts để thêm thành phần đó vào dự án của bạn.

do đó, làm theo thứ tự ngược lại

1. Xóa phụ thuộc khỏi app.module.ts
2. Xóa thư mục thành phần đó.

khi loại bỏ sự phụ thuộc bạn phải làm hai việc.

1. Xóa tham chiếu dòng nhập từ tệp app.module.ts.
2. Xóa khai báo thành phần khỏi mảng khai báo @NgModule trong app.module.ts.

Sử dụng Visual Studio Code, xóa thư mục thành phần và xem trong Project Explorer (phía bên trái) các tệp có màu Đỏ có nghĩa là các tệp bị ảnh hưởng và tạo ra lỗi. Mở từng tệp và loại bỏ mã sử dụng thành phần.

Hiện tại Angular CLI không hỗ trợ tùy chọn xóa thành phần, bạn cần thực hiện thủ công.

1. Xóa tham chiếu nhập cho mọi thành phần khỏi app.module
2. Xóa các thư mục thành phần.
3. Bạn cũng cần xóa khai báo thành phần khỏi mảng khai báo @NgModule trong tệp app.module.ts

Tôi đã viết một tập lệnh bash sẽ tự động hóa quá trình được viết bởi Yakov Fain bên dưới. Nó có thể được gọi là ./removeComponent myComponentName Điều này chỉ được thử nghiệm với 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

Tôi không chắc đó có phải là cách tốt nhất không, nhưng nó hiệu quả với tôi.

• Đầu tiên, tôi xóa thư mục thành phần.
• Sau đó, tôi đã xóa app.module.ts, app.component.ts & app.component.html của các nhập khẩu và khai báo liên quan đến thành phần tôi muốn xóa.
• Tương tự, tôi xóa main.ts.

Tôi chỉ lưu và làm mới ứng dụng và nó hoạt động.

Trả lời cho góc 2+

Xóa thành phần from imports and declaration arraycủa app.modules.ts.

Kiểm tra thứ hai tham chiếu của nó được thêm vào trong mô-đun khác, nếu có thì loại bỏ nó và

cuối cùng delete that component Manuallytừ ứng dụng và bạn đã hoàn thành.

Hoặc bạn có thể làm điều đó theo thứ tự ngược lại cũng có.

Từ app.module.ts:

• xóa dòng nhập khẩu cho các thành phần cụ thể;
• xóa tuyên bố của nó khỏi @NgModule;

Sau đó xóa các thư mục của các thành phần bạn muốn xóa và các tập tin bao gồm nó ( .component.ts, .component.html, .component.cssvà .component.spec.ts).

Làm xong.

-

Tôi đọc mọi người nói về việc xóa nó khỏi main.ts. Bạn không cần phải nhập nó từ đó ngay từ đầu vì nó đã nhập AppModule và AppModule là phần nhập tất cả các thành phần bạn đã tạo.

Tôi cần xóa một chỉ thị Angular 6 có tệp spec bị lỗi. Ngay cả sau khi xóa các tệp vi phạm, xóa tất cả các tham chiếu đến nó và xây dựng lại ứng dụng, TS vẫn báo cáo lỗi tương tự. Điều làm việc cho tôi là khởi động lại Visual Studio - điều này đã xóa lỗi và tất cả dấu vết của chỉ thị không mong muốn cũ.

Trước hết, xóa thư mục thành phần mà bạn phải xóa và sau đó xóa các mục nhập mà bạn đã thực hiện trong các tệp "ts".

Nếu bạn đang tìm kiếm một số lệnh trong CLI, thì bây giờ ans là KHÔNG . Nhưng bạn có thể làm thủ công bằng cách xóa thư mục thành phần và tất cả các tham chiếu.

Điều này không được hỗ trợ bởi Angular CLI và họ không có tâm trạng để sớm đưa nó vào bất cứ lúc nào.

Đây là liên kết đến vấn đề được tạo thực tế - https://github.com/angular/angular-cli/issues/1776

Và một ảnh chụp màn hình của giải pháp từ các quan chức -