Angular CLI : aprenda comandos matadores

→ ng new hello-world

Se você trabalhou com Angular em algum momento, muito provavelmente já se deparou com o comando acima, certo?

A ideia dessa é mostrar com exemplos práticos como utilizar diversos comandos escondidos (nem tanto) da ferramenta Angular CLI para turbinar aquelas tarefas chatas do dia a dia. 

Bora?

Começando a instalação 

O mais importante agora é instalar a ferramenta que o angular disponibiliza para acelerar o processo de desenvolvimento: o Angular CLI. É bem simples, basta abrir um prompt de comando (CMD) e executar o comando abaixo:

npm install -g @angular/cli

Após alguns minutos a ferramenta de linha de comando do Angular estará pronta para ser usada.

❗ O comando mais importante do Angular CLI
‍

→ ng new hello-world

Por que esse comando é tão importante? É por ele que tudo começa! 

Qualquer projeto que usa Angular como base de um jeito ou de outro, usará esse comando. E o melhor é que podemos fazer várias coisas com esse comando principal.

Confere aí. :) 

--routing
ng new hello-world --routing

Esse comando 'parametrozinho' a mais que você coloca na linha de comando, já cria pra você um arquivo de rotas. Dá pra ter uma ideia de como padronizar a nomenclatura e estrutura de arquivos de rotas que você irá desenvolver para a sua aplicação.

--prefix
ng new hello-world --prefix lib

Todo projeto Angular tem como prefixo padrão a palavra 'app'. Se você criar qualquer coisa no angular na mão e não configurar o prefixo, o validador de códigos irá dizer que você não está seguindo o padrão de codificação. 

O comando acima é muito interessante quando você está trabalhando em alguma biblioteca. Utilizar o prefixo padrão 'app' em uma biblioteca, deixa tudo muito genérico, e pra quem utiliza fica confuso a mistura de funcionalidade com biblioteca.

--style
ng new hello-world --style scss
‍

Uma das grandes vantagens do angular é poder escolher como você vai usar o CSS. Pode usar ele puro e com outros preprocessadores. A ideia do parâmetro --style é poder configurar já na criação do projeto qual "tipo" de CSS você vai poder utilizar. Alguém aí gosta de trabalhar com SCSS? Deixa nos comentários! 

--skipGit

ng new hello-world --skipGit=true

Se por motivos de necessidade (ou insanidade) o projeto não utilizar GIT para controle de fontes, é possível pular a inicialização do repositório GIT:) Aí é um arquivo a menos pra você pensar na cagada que está fazendo escolhendo outra ferramenta pra controle de fontes.

--skipInstall

ng new hello-world --skipInstall=true

Uma sugestão muito prática pra testar todos esses comandos de criação é utilizar o comando "--skipInstall". Com isso é possível testar vários comandos, ver estrutura dos projetos em muito menos tempo pois a máquina só vai se encarregar de criar os arquivos do projeto e não vai instalar todos aqueles pacotes pesados de javascript que o angular precisa pra funcionar.

‍

→ --verbose

→ ng new hello-world --verbose=true

Mas se por algum motivo um comando simplesmente dá um erro maluco (bastante rao), o comando --verbose ajudar a enxergar onde está o projeto, ou seja, dar um log mais detalhado da criação do projeto.

--minimal

ng new hello-world --minimal=true

Algumas vezes a intenção é testar alguma super hiper mini MINI implementação. Por padrão a criação de um projeto Angular, cria e instala um monte de script relacionado a testes, que não é necessário para essas provas de conceitos rápidas. O papel desse comando é agilizar a criação do projeto.

‍

✅Simples assim!

A minha intenção aqui não foi mostrar todos os comandos e parâmetros, já que isso conseguimos encontrar facilmente na documentação do Angular, que é ótima. 

A ideia foi mostrar o que eu aprendi e tentar abrir um pouco as possibilidades para alguns cenários no dia a dia.

E aí, tem algum comando que você gostaria de compartilhar para criação de projetos? Deixe sua opinião nos comentários! 

Lembre-se: somos uma comunidade e é assim que crescemos :)

Newsletter de tecnologia

Aproveita pra assinar aqui nossa newsletter semanal de tecnologia e receber em primeira mão nossos conteúdos.

‍