Como renomear um componente na CLI angular?

177

Existe algum atalho para renomear um componente com a CLI Angular que não seja a edição manual de todos os arquivos do componente, como nome da pasta, .css, .ts, spec.ts e app.module.ts?

— Thomas Easo
fonte

1

Apenas renomeie o seletor, se desejar alterar a tag html. Se você quiser mudar de classe, você precisa fazê-lo manualmente.

— Alaksandar Jesus Gene

Até que eles adicionar em ng destroyque você não está com sorte ...

— William Hampshire

4

Você pode monitorar o recurso neste tópico: github.com/angular/angular-cli/issues/900

— Andrii Romanchak 4/17

procurar e substituir, renomear um par de arquivos / diretórios .... trabalho feito

— ldgorman

179

Não!

Não há comando que altere o nome de todos os arquivos gerados usando o comando create do componente. Então ts, criado html,css/scss , .spec.ts arquivos precisam ser renomeado / editado manualmente.

Eu sou um usuário frequente de angular cli e acho que esse seria um comando interessante, já que em algum momento criamos componentes angulares e precisamos renomeá-los. Como esse comando de renomeação não existe, excluir o componente angular criado, diretiva etc. etc e executar novamente o comando para criar o componente é realmente um problema.

Aqui está o link da discussão para adicionar este recurso renomear componente angular

— Aniruddha Das
fonte

6

Isso também seria útil para reutilizar projetos antigos.

— Leo

1

As novas WebStorm 2018.1.2palavras permitem renomear o componente, mas nunca o usaram. vai dar uma chance um dia mais tarde

— Aniruddha Das

2

No VSCode, por exemplo, quando há algo errado (arquivo importado que não existe, componente inexistente e assim por diante), você pode ver as indicações de erro no painel do explorador de arquivos à esquerda. Portanto, no meu caso, eu precisava renomear um componente, apenas renomeei sua pasta e nomes de arquivos internos e segui todas as indicações de erro, modificando o nome desse componente de acordo. Eu acho que esse recurso existe também em outros IDEs modernos hoje em dia ... Mas ter um comando angular-cli que faça isso automaticamente (como "ng gc ...") seria ótimo! Feliz codificação! :)

— TheCuBeMan

1

Há uma discussão sobre esse recurso desde 2016 sobre esse recurso: github.com/angular/angular-cli/issues/900 Todas as solicitações de um recurso desse tipo estão vinculadas a esse encadeamento e fechadas. @AniruddhaDa você se importaria de adicionar isso à resposta?

— Stefan

1

@Stefan adicionado agora. veja se parece ok, fique à vontade para editar também.

— Aniruddha Das

48

Atualmente, a Angular CLI não suporta o recurso de renomear ou refatorar código.

Você pode obter essa funcionalidade com a ajuda de algum IDE.

Intellij, Eclipse, VSCode etc. tem suporte padrão à refatoração.

Hoje em dia o VSCode está mostrando alguma tendência de alta, pessoalmente sou fã disso

Refatorando com VSCode

Determinação da referência : - O código VS ajuda a encontrar todas as referências de uma variável selecionando a variável e pressionando o atalho SHIFT+F12 . Isso funciona incrivelmente bem com o Type Script.

Renomeando todas as instâncias de referência : - Depois de encontrar todas as referências, você pode pressionarF2 , abrirá um pop-up e você poderá alterar o valor e clicar em Enter. Isso atualizará todas as instâncias de referência.

Renomeando arquivos e importações Você pode renomear um arquivo e suas referências de importação com um plug-in. Mais detalhes podem ser encontrados aqui

Com as etapas acima, após renomear as variáveis e os arquivos, é possível obter a renomeação do componente angular.

— samuelj90
fonte

3

Você fala sobre referências, arquivos e importações, mas e quanto a renomear componentes?

— Ortomala Lokni

1

O @OrtomalaLokni angular-cli não suporta renomear. A tarefa de renomear pode ser alcançada com essas três etapas.

— precisa saber é

1

veja renomear angular

instalar

npm install -g angular-rename

usar

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
fonte

1

O repositório do Github não existe mais

— Emmanuel

o pior componente evet ... sem documentos apropriados, cheios de bugs ... boa idéia ... mas inútil

— DS_web_developer

1

Enquanto o OP solicita um comando da CLI, algumas das respostas se concentram nos IDEs. Nesta resposta, confirmo apenas que o WebStorm / IntelliJ atual permite renomear o componente. Tudo o que precisa ser feito é tentar renomear a classe no .tsarquivo. Você será apresentado com:

e a renomeação será realizada em todos os locais relevantes.

— P Marecki
fonte

Isso foi relatado pela primeira vez no tópico atual por @Aniruddha Das

— P Marecki 25/10/19

0

Como a primeira resposta indicou, atualmente não há como renomear componentes, por isso estamos falando apenas de soluções alternativas! Isto é o que eu faço:

Crie o novo componente que você gostou.

ng gerar componente newName
Use o editor de código do Visual studio ou qualquer outro editor para mover convenientemente o código / partes lado a lado!
No Linux, use grep & sed (localizar e substituir) para encontrar / substituir referências.

grep -ir "nome antigo"

cd sua pasta

sed -i 's / oldName / newName / g' *

— salah-1
fonte

0

Pessoalmente, não encontrei nenhum comando para o mesmo. Basta fazer um novo componente (nome renomeado) e copiar colar do componente anteriores html, csse ts. Em tsobviamente, o nome da classe seria substituído. É o método mais seguro, mas demora um pouco.

— Priyanka Arora
fonte

0

No WebStorm, você pode clicar com o botão direito do mouse em → Refatorar → Renomear no nome do componente no arquivo TypeScript e ele mudará o nome para qualquer lugar.

— Ollie
fonte