Qual è il modo migliore per eliminare un componente con CLI

Ho provato a usare "ng destroy component foo" e mi dice "Il comando destro non è supportato da Angular-CLI"

Come possiamo eliminare correttamente i componenti con la CLI angolare?

destroyo qualcosa di simile potrebbe venire alla CLI, ma al momento non è un obiettivo primario. Quindi dovrai farlo manualmente.

Eliminare la directory del componente (presupponendo che non sia stata utilizzata --flat), quindi rimuoverla dalla NgModulequale è stata dichiarata.

Se non sei sicuro di cosa fare, ti suggerisco di avere un'app "pulita", il che significa che non sono presenti gitmodifiche. Quindi generare un componente e vedere cosa è cambiato nel repository in modo da poter tornare indietro da lì cosa sarà necessario fare per eliminare un componente.

Aggiornare

Se stai solo sperimentando ciò che vuoi generare, puoi usare il --dry-runflag per non produrre alcun file sul disco, basta vedere l'elenco dei file aggiornato.

1. Elimina la cartella contenente questo componente.
2. In app.module.ts rimuovi l'istruzione import per questo componente e rimuovi il suo nome dalla sezione dichiarazione di @NgModule
3. Rimuovere la riga con l'istruzione export per questo componente da index.ts.

Dal momento che non è ancora supportato utilizzando l'interfaccia della riga di comando angolare

quindi ecco il modo possibile, prima di ciò si prega di osservare cosa succede quando si crea un componente / servizio utilizzando l'interfaccia della riga di comando (es. ng g c demoComponent).

1. Crea una cartella separata denominata demoComponent( ng g c demoComponent).
2. Genera HTML,CSS,tse un specfile dedicato a demoComponent.
3. Inoltre, aggiunge dipendenza all'interno del file app.module.ts per aggiungere quel componente al progetto.

quindi fallo nell'ordine inverso

1. Rimuovi dipendenza da app.module.ts
2. Elimina la cartella del componente.

quando si rimuove la dipendenza bisogna fare due cose.

1. Rimuovere il riferimento della riga di importazione dal file app.module.ts.
2. Rimuovere la dichiarazione del componente dall'array di dichiarazioni @NgModule in app.module.ts.

Utilizzando Visual Studio Code, elimina la cartella dei componenti e visualizza in Esplora progetti (lato sinistro) i file con il colore rosso che indica che i file sono interessati e hanno prodotto errori. Apri ogni file e rimuovi il codice che utilizza il componente.

Attualmente la CLI angolare non supporta un'opzione per rimuovere il componente, è necessario farlo manualmente.

1. Rimuovere i riferimenti di importazione per ogni componente da app.module
2. Elimina le cartelle dei componenti.
3. È inoltre necessario rimuovere la dichiarazione del componente dall'array di dichiarazioni @NgModule nel file app.module.ts

Ho scritto uno script bash che dovrebbe automatizzare il processo scritto da Yakov Fain di seguito. Può essere chiamato come ./removeComponent myComponentName Questo è stato testato solo con 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

Non sono sicuro che sia il modo migliore, ma ha funzionato per me.

• Innanzitutto, ho eliminato la cartella dei componenti.
• Quindi, ho cancellato app.module.ts, app.component.ts e app.component.html delle importazioni e delle dichiarazioni relative al componente che volevo eliminare.
• Allo stesso modo, ho cancellato main.ts.

Ho appena salvato e aggiornato l'app e ha funzionato.

Risposta per Angular 2+

Rimuovi il componente from imports and declaration arraydi app.modules.ts.

In secondo luogo, il suo riferimento viene aggiunto in un altro modulo, se sì, rimuoverlo e

finalmente delete that component Manuallydall'app e il gioco è fatto.

Oppure puoi farlo anche in ordine inverso.

Da app.module.ts:

• cancella la riga di importazione per il componente specifico;
• cancella la sua dichiarazione da @NgModule;

Quindi eliminare la cartella del componente che si desidera eliminare e le sue file inclusi ( .component.ts, .component.html,.component.css e .component.spec.ts).

Fatto.

-

Ho letto persone che dicevano di cancellarlo da main.ts. Non dovevi importarlo da lì in primo luogo poiché importa già AppModule e AppModule è quello che importa tutti i componenti che hai creato.

Avevo bisogno di eliminare una direttiva Angular 6 il cui file di specifiche era errato. Anche dopo aver eliminato i file offensivi, rimosso tutti i riferimenti ad esso e ricostruito l'app, TS stava ancora segnalando lo stesso errore. Ciò che ha funzionato per me è stato il riavvio di Visual Studio: questo ha eliminato l'errore e tutte le tracce della vecchia direttiva indesiderata.

Prima di tutto, rimuovere la cartella dei componenti, che è necessario eliminare, quindi rimuovere le relative voci create nei file "ts".

Se stai cercando un comando nella CLI, allora ans è NO per ora. Ma puoi farlo manualmente eliminando la cartella dei componenti e tutti i riferimenti.

Questo non è supportato dalla CLI angolare e non sono in vena di includerlo presto.

Ecco il link al problema reale creato - https://github.com/angular/angular-cli/issues/1776

E uno screenshot della soluzione dei funzionari -