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?

angular angular-cli rename angular-components 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

Respostas:

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

insira a descrição da imagem 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:

insira a descrição da imagem aqui

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:

  1. Crie o novo componente que você gostou.

    ng gerar componente newName

  2. Use o editor de código do Visual studio ou qualquer outro editor para mover convenientemente o código / partes lado a lado!

  3. 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