Simplificando Angular CLI para iniciantes

Então você quer escrever seu primeiro aplicativo Angular, no entanto, configurar até mesmo um aplicativo de Angular 'Hello World' não é fácil. Requer muitas etapas, como:

• Configurando um compilador TypeScript, se você optar por usar TypeScript
• Configuration of Webpack or other module loader
• Setting up local web development server
• Instalando e configurando dependências
• Configuring Unit Test environment
• Configurando o ambiente de teste de ponta a ponta
• Trabalhando com entrega contínua
• Trabalhando com Integração Contínua e muito mais.

Você pode executar todas essas tarefas manualmente, mas isso exigirá uma forte compreensão de todos esses conceitos e tornará o início de um novo projeto muito demorado. Para resolver esse problema, Angular vem com a Angular Interface de Linha de Comando (CLI).

Saiba mais sobre isso aqui: https://cli.angular.io/

Todas essas tarefas são realizadas pela CLI Angular, que é uma ferramenta de linha de comando para criar, testar e implantar aplicativos Angular. É recomendável usar Angular CLI para criar aplicativos Angular, pois você não precisa gastar tempo instalando e configurando todas as dependências necessárias e conectando tudo junto. Ele fornece muitos clichês e economiza seu tempo.

Ele usa o Webpack para incluir todo o empacotamento, o módulo de carregamento, a funcionalidade de importação, o BrowserLink e muito mais. Toda a configuração do Webpack é feita completamente pela CLI para que você não precise se preocupar com isso. Ele também configura Jasmine e Karma para testes de unidade e TypeScript complier para transpilar o arquivo TypeScript para JavaScript etc.  Vamos ver como podemos trabalhar com Angular CLI.

Installation of Angular CLI 

Você pode instalar Angular CLI globalmente em uma máquina de desenvolvimento local usando o npm.

Para trabalhar com o npm, certifique-se de instalar o NodeJS aqui : https://nodejs.org/en/. Depois que o NodeJS estiver instalado, você poderá usar o npm para instalar Angular CLI. Para descobrir se o NodeJS está instalado, execute o comando

node –v

Você deve ver o número da versão do NodeJS retornado.  Depois que o NodeJS estiver instalado, você precisará ter certeza se o npm está instalado ou não. No Windows com o instalador nodeJS, o npm também será instalado. No entanto, você também pode usar um comando para instalá-lo:

npm install -g npm 

Você pode usar o alias –v para verificar a versão do npm instalada:

Depois disso, faça o seguinte para instalar Angular CLI:

 npm install @angular/cli -g

Agora você instalou Angular CLI globalmente.  Para verificar se Angular CLI está instalada, execute este comando:

ng –version

 Você deve ver as versões da CLI e de outros pacotes Angular.  Depois de ver o número da versão como na imagem acima, você pode ter certeza de que Angular CLI foi instalada com êxito em seu sistema. Outra maneira de descobrir se Angular CLI está instalada globalmente no sistema é executar o comando npm list:

 npm list -g @angular/cli --depth=0

O comando acima retornará a versão da CLI instalada Angular e você terá certeza de que Angular CLI foi instalada com êxito em sua máquina.

Upgrade Angular CLI 

Às vezes, pode ser necessário atualizar Angular CLI para a versão mais recente. Você pode fazer isso usando uma combinação destes três comandos:

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli

Às vezes, você pode ter que usar –force para limpar o cache.

Getting help in Angular CLI

Você pode obter ajuda na CLI Angular usando o comando help:

ng help 

Angular listará todas as opções de ajuda disponíveis, conforme mostrado na imagem acima.  Você pode obter ajuda para um comando específico executando:

ng [command name] –help

Criando o primeiro aplicativo

Depois de instalar Angular CLI, você pode usar seu comando para gerar um novo projeto Angular. Você pode criar um novo aplicativo usando o comando ng new:

ng new helloworld --skip-install

Acima, criamos um novo projeto chamado HelloWorld. Selecionamos a opção de não instalar dependências usando–skip-install. Executaremos npm install separadamente para instalar dependências.  Se você executar o comando abaixo, ele criará o projeto e instalará as dependências também.

ng new helloworld

Quando você cria um novo projeto usando Angular CLI, ele solicita duas opções

1. Se você deseja adicionar roteamento ao projeto
2. Qual estilo você deseja escolher, como CSS, SCSS e LESS etc.

Você pode optar por adicionar roteamento ou não, também pode escolher diferentes maneiras de estilizar seu aplicativo.  Depois que o aplicativo for criado, você poderá abri-lo em qualquer editor de código para trabalhar com ele. Hoje em dia, o Visual Studio Code é muito popular.  Você pode executar o aplicativo scaffold usando o seguinte comando:

 ng serve 

Como você pode ver, o aplicativo foi compilado com sucesso e, por padrão, é executado no poeta 4200. Existem muitas opções disponíveis com o comando ng serve. Se você quiser explorar mais, várias opções estão disponíveis com ng new comando, execute-o com ajuda:

ng new –help

Como você vê, ele tem um argumento, que é o nome do projeto, além de que existem muitas opções disponíveis.  Por exemplo

ng new HelloWorld –dry-run 

O comando acima criará arquivos sem escrever nada nele.

ng new HelloWorld –inline-template 

O comando acima inclui o modelo embutido no arquivo TS do componente.  Existem até opções de comando para usar Angular nova renderização Ivy.

ng new HelloWorld  --experimental-ivy 

Existem muitas opções disponíveis com ng new comando, que você deve conhecer.

Depois de criar um novo projeto com o comando ng new, você pode abrir package.json arquivo para explorar várias opções e dependências.

Por exemplo, você pode alterar os comandos iniciar, compilar e testar no arquivo package.json para este projeto específico.  Além disso, você pode encontrar várias dependências do projeto no arquivo.  Outro arquivo importante, que contém Angular configuração para CLI, é angular.json arquivo.

 

Esse arquivo contém todas as informações de configuração relacionadas à CLI Angular para esse projeto específico.  Por exemplo, vamos considerar a propriedade prefix.  Por padrão, ele é definido como app. Portanto, sempre que você cria um componente, serviço etc., o nome deles é prefixado com app.  Como você pode observar em AppComponent.

Você pode ter um requisito para alterar o prefixo de acordo com sua necessidade de negócios.  Digamos que você queira que o prefixo seja definido como o nome da sua empresa, foo. Você pode configurar Angular CLI para usar foo como prefixo em vez de app de três maneiras

1. By manually changing angular.json file
2. Usando a opção –prefix com o comando ng new
3. Usando ng config para configuração global

Alterei o valor de prefix em angular.json e executei o comando para gerar um componente de login.  Como você pode ver, o componente agora gerado tem o prefixo foo usado.

Se você não quiser alterar angular.json, no momento da execução ng new, você pode usar a opção prefix

ng new helloword1 --prefix foo --skip-tests

No comando acima, combinamos duas opções. Angular CLI permite combinar opções para criar o projeto como desejar. No comando acima, estamos dizendo para criar um novo projeto com o prefixo definido como foo e também não criar um arquivo de teste (*.spec). Como saída, Angular CLI criará o projeto e você verá que foo é prefixado, conforme mostrado na imagem abaixo:

Você pode combinar qualquer número de opções com o comando ng new para obter a configuração desejada para o projeto recém-criado.

Generate Commands

Angular CLI fornece o comando ng generate para gerar vários esquemas.  Por exemplo, você pode usar:

ng generate component login

O comando acima gerará um componente chamado LoginComponent no projeto. Existem muitas opções disponíveis com ng generate. Você pode listá-los com a opção –help.

ng generate –help

Como você vê, ele usa o esquema como argumento com várias opções possíveis. Os argumentos esquemáticos disponíveis são os seguintes:

• appShell
• application
• class
• componente
• directive
• enumeração
• guard
• interface
• biblioteca
• module
• cachimbo
• service
• serviceWorker
• universal

Usando o comando gerar, você pode gerar um componente ou até mesmo adicionar um serviceWorker em seu projeto para convertê-lo em um Progressive Web App.

ng generate serviceWorker

Gerar componente

Você pode gerar um novo componente usando o comando ng genere. Abaixo, estou executando o comando generate com a opção dry.

ng generate component products –dry

Executamos o comando generate com a opção dry para garantir que tudo esteja correto.  Você deve executar um comando no modo seco para verificar um comando.  Podemos gerar um componente com o comando abaixo:

ng generate component products

O comando acima adicionará uma pasta chamada products e os seguintes arquivos no projeto:

1. component.ts
2. component.html
3. component.css

Não acrescentou products.spec.ts. arquivo porque o projeto hellowworld1 foi criado com a opção –skip-tests. Você pode configurar várias opções com ng generate component para decidir se o modelo e o estilo devem estar em arquivos externos ou embutidos na classe do componente. Você pode verificar as opções disponíveis com o comando –help.

ng generate component –help

 Como você pode ver, as diferentes opções disponíveis são:

• –change-detection
• –componente de entrada
• –export
• –flat
• –estilo embutido
• –predefinição-embutida
• –lint-fix
• –module
• –prefix
• –projeto
• –selector
• –skip-import
• –skip-tests
• –spec
• –style
• –styleext
• –view-encapsulation

Existem atalhos disponíveis para essas opções também. Você pode ler em detalhes sobre as opções de geração de componentes na ajuda. Agora, digamos que você queira gerar um componente com encapsulamento de exibição e detecção de alterações pré-configurado. Isso pode ser feito pelo comando abaixo:

ng g c addproduct  --v ShadowDom --c OnPush

Aqui, usei o atalho para comando e opções. Estamos configurando o componente para usar o Shadow Dom View Encapsulation e o OnPush Change Detection. O componente gerado terá a seguinte aparência:

Você pode combinar muitas opções para gerar componentes conforme exigido pelo seu projeto.

Gerar Diretiva

Você pode gerar diretiva com o seguinte comando:

ng generate directive creditcard

O comando acima irá gerar uma diretiva no projeto, conforme mostrado na imagem abaixo. Lembre-se de que o seletor começa com foo em vez de app porque configuramos o projeto para usar o prefixo foo ao criá-lo.

Assim como os componentes, também existem muitas opções disponíveis com geração de diretiva. Você pode listá-los com –help

ng generate directive  --help

 Várias opções disponíveis com a geração de diretivas são:

• –export
• –flat
• –lint-fix
• –module
• –projeto
• –selector
• –skip-import
• –skip-tests
• –spec

Você pode usar essas opções em várias combinações para gerar diretivas conforme necessário em seu projeto.

Generate Service

A maneira como você gera componente e diretiva, você pode gerar

1. Service
2. Cachimbo
3. Interface
4. Class
5. Enum etc.

Para gerar o comando de execução de serviço:

ng generate service foodata

O comando acima criará um serviço no projeto.  Você pode explorar:

ng generate –help

Para encontrar outras opções esquemáticas disponíveis.

Construindo e servindo

Você pode criar um aplicativo Angular usando o comando ng build:

ng build

Como você pode ver, o ng build produz arquivos para serem baixados no navegador. Eles são:

• Main
• Polyfills
• Runtime
• Estilos
• Vendor

Existem muitas opções disponíveis com ng build que você pode listar com o comando –help.

ng build –help

 Existem muitas opções disponíveis, como

• –aot
• –base-href
• –prod
• –deploy-url
• –output-hashing
• –mapa de origem etc.

Existem muitas opções disponíveis nas opções listadas acima. Você pode aprender em detalhes na ajuda.

Se você deseja criar e servir seu aplicativo rastreando as alterações de arquivo, use o comando ng serve.  Por padrão, ele atende ao aplicativo na porta 4200.

ng serve 

Se você fez isso com sucesso, deverá ver a mensagem Compilado com sucesso, conforme mostrado acima. Além disso, está dizendo que o aplicativo está escutando na porta 4200.  Você pode listar várias opções disponíveis com ng serve usando o comando –help.

Resumo

Neste artigo, aprendemos sobre Angular CLI e vários comandos disponíveis com ela. Você deve usar Angular CLI para um desenvolvimento mais rápido de aplicativos Angular.