Angular CLI : aprenda comandos matadores

Neste artigo você vai ver:

Se você trabalhou com Angular em algum momento, muito provavelmente já se deparou com o comando ng new hello-world, certo? A ideia desse artigo é 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?

Só para revisar: o que é Angular CLI?

Só para garantir que estamos na mesma página, quero conceituar o que é o Angular CLI. Essa ferramenta open source foi criada pelo próprio time de desenvolvimento do Angular que acelera a criação de itens importantes para os nossos projetos, como componentes, classes e muito mais.


Lembrando que CLI significa command-line interface, ou Interface de Linha de Comando em português.

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. 

Para instalar 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í. 🙂

Comandos matadores com o Angular CLI

Agora vamos ver comandos matadores para usar com o ng new hello-world no Angular CLI.

–routing

ng new hello-world --routing

Esse comando “parametrozinho” a mais que você coloca na linha de comando, já cria 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! 

–skip-git

ng new hello-world --skip-git=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.

–skip-install

ng new hello-world --skip-install=true

Uma sugestão muito prática pra testar todos esses comandos de criação é utilizar o comando “–skip-install”. Com isso, é possível testar vários comandos, ver estrutura dos projetos em 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 raro), o comando –verbose ajuda 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ápidos. O papel desse comando é agilizar a criação do projeto.‍ Simples assim!

Angular CLI: uma ferramenta com muitos recursos para agilizar o desenvolvimento

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 🙂

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

Mateus Leal
Front-end Developer
Entusiasta de Javascript e aprendendo a ensinar.

Artigos relacionados

Este site utiliza cookies para proporcionar uma experiência de navegação melhor. Consulte nossa Política de Privacidade.