Angular-CLI

Muitos alunos estão ansiosos pelo Angular CLI que ainda esta em versão beta. Para satisfazer esses alunos, ensinarei como instalar o Angular CLI BETA e utilizá-lo.

Instalando o Angular CLI globalmente

Ferramentas em linha de comando são geralmente instaladas globalmente para que possamos utilizá-la em qualquer local da nossa aplicação. Mas muita atenção, porque instalar pacotes do Node.js requer permissão de administrador. Tenha certeza de ter os privilégios de administrador antes de continuar.

Em seu terminal favorito, execute o comando:

npm install -g [email protected]

OBS: não atualize esta versão até que a versão final saia! Ele foi testada por mim e funciona sem problemas com o nosso projeto.

Esse processo levará um tempo porque várias dependências são baixadas.

Testando o Angular CLI criando um novo projeto.

Com certeza você observou que a criação de um novo projeto no Angular 2 é um tanto burocrática e é justamente isso o que o Angular CLI vem atacar. Com um único comando você já cria um projeto com toda infraestrutura necessária, inclusive livereloading de seus arquivos.

Que tal testarmos essa poderosa ferramenta criando o projeto projeto-teste e verificar o que acontece?

Em sua área de trabalho execute o seguinte comando:

ng new projeto-teste

Demorará um tempo considerável até que todas as dependências sejam baixadas e o terminal seja liberado. Vá tomar um café ou quem sabe dormir um pouquinho enquanto o procedimento acaba.

Depois de concluído, entre dentro da pasta projeto-teste. Você verá zilhões de arquivos de configuração, inclusive aqueles para ambiente de testes que não abordamos. Mas o mais importante é olhar dentro da pasta projeto-teste/src. Veja que dentro dela há a pasta app. Essa pasta possui praticamente a mesma estrutura da pasta alurapic/client/app. Existe o app.module.ts, inclusive o app.component.ts com seu app.component.html.

Tudo que estiver fora de projeto-teste/src é infraestrutura e pode ser ignorada nesse primeiro momento, aliás, é isso que desejamos, não ter que saber como toda essa infra é criada. Até porque você já aprendeu ao logo do treinamento a entender a razão de alguns dos arquivos de configurações usado pelo Angular.

Acessando projeto

Dessa vez, o próprio Angular CLI é o responsável em servir a aplicação para nós sendo assim, aquele nosso servidor alurapic/server só disponibilizará dados e não compartilhará mais a página index.html. Mas não se preocupe com o projeto que você criou por enquanto, foque em entender o fundamental do Angular CLI.

Para acessarmos o projeto no browser, entre na pasta projeto-teste e execute a instrução:

ng serve

Você fará com que o Angular CLI sirva os arquivos para o browser. Esse processo demorará alguns segundos, porque o Angular CLI não usa mais o System.js para carregamento de módulos, ele utiliza o Webpack e toda sua configuração é abstraída para nós pelo Angular CLI. Se entendeu a finalidade do System.js em nosso projeto já entende a finalidade do Webpack. Trocamos um loader por outro.

Assim que a construção do projeto terminar, você poderá acessa-lo através do endereço

http://localhost:4200/

Criando um novo componente

O Angular CLI é capaz de um monte de façanhas que podem ser verificadas em sua documentação https://github.com/angular/angular-cli. Vamos focar em uma delas que é a criação de um novo componente.

Dentro da pasta projeto-teste execute o comando para criar o componente tabela:

ng g component tabela

No terminal será exibido o seguinte informação:

installing component
  create src/app/tabela/tabela.component.css
  create src/app/tabela/tabela.component.html
  create src/app/tabela/tabela.component.spec.ts
  create src/app/tabela/tabela.component.ts

Veja que o componente segue a convenção que utilizamos desde o início do treinamento, tanto da estrutura de diretório quando a nomenclatura. O arquivo tabela.component.spec.ts é um arquivo para teste automatizado.

Criando um módulo

E se quisermos criar um novo módulo? Vamos criar o módulo papagaio:

ng g module papagaio

Você verá no terminal a mensagem

installing module
  create src/app/papagaio/papagaio.module.ts
installing component
  create src/app/papagaio/papagaio.component.css
  create src/app/papagaio/papagaio.component.html
  create src/app/papagaio/papagaio.component.spec.ts
  create src/app/papagaio/papagaio.component.ts

Veja que ele já criou o módulo e um componente para este módulo. Inclusive se você editar papagaio.module.ts verá que ele já fez o importe do componente papagaio.component.ts. Mas atenção, o módulo não é importado automaticamente em app.module.ts!

O build do projeto

Sabemos que todo projeto web precisa passar por uma série de otimizações como concatenação, minificação de scripts e tudo mais. Podemos fazer isso automaticamente com o comando:

ng build --prod

A pasta projeto-teste/dist será criada com os arquivos do projeto otimizados. Aliás, podemos além de buildar o projeto, podemos servi-lo também:

ng serve --prod

Considerações sobre o Angular CLI BETA

Sendo um software BETA ele esta sujeito à mudanças. Fique atento!