Pequeno tutorial para configurar o ambiente Windows para desenvolvimento Angular 4

1. Configurando ambiente para
dev Angular com Typescript
Angular 4
09/04/2018
Edenízia Costa

2. Configurando ambiente de desenvolvimento Angular 4 e Typescript
Edenizia Costa – Analista e Desenvolvedora de Sistemas
Preparar o ambiente para desenvolvimento angular
Basicamente precisaremos de três ferramentas:
1- Node.js
O node Js é uma plataforma de execução de códigos javaScript construída com base
no Google Chrome. Com ele é possível criar aplicações server-side.
2- npm
O npm é o gerenciador de pacotes do node Js. Facilitando a instalação de pacotes de
códigos reutilizaveis e expandindo os recursos do ambiente de desenvolvimento e das
aplicações.
3- Angular-cli
O angular-cli é uma interface de linha de comando para aplicações angular js. Onde é
possível automatizar processos que com frequencia preciamos criar. Também nos permite a
criação de servidores locais, para efeturamos testes durante o desenvolvimento.
Passos para as instalações:
1º passo- Acesse a página https://nodejs.org/en/
2º passo - Baixe a versão "current" para o seu tipo de SO.

3. Configurando ambiente de desenvolvimento Angular 4 e Typescript
Edenizia Costa – Analista e Desenvolvedora de Sistemas
3º passo - Execute a instalação do node, com ela você já estará instalando o pacote do npm
também, já que o instalador do node trás o pacote npm embutido.
Mantenha o local sugerido pelo instalador, mas não é obrigatório.
Basta manter tudo selecionado e avançar a instalação. (lembrando que esse é o instalador do
Windows)

4. Configurando ambiente de desenvolvimento Angular 4 e Typescript
Edenizia Costa – Analista e Desenvolvedora de Sistemas
Obs.: Depois de finalizada a instalação você pode testar seu ambiente acessando a linha de
comando de seu sistema operacional e digitando:
node -v (isso vai lhe mostrar a versão no seu sistema.)
Depois digite:
npm -v (e veja também a versão do npm instalada no seu sistema)
4º passo- Finalmente instale o angular-cli utilizando o npm. Digite o comando a seguir na linha
de comando: npm install -g @angular/cli
O -g é usado para que esse pacote seja instalado de forma global no seu sistema. E possa ser
usado em projetos de qualquer local na sua máquina.
Caso esteja no Sistema operacional OSX ou Linux pode ser necessário a instrução sudo:
sudo npm install-g @angular/cli
Feito esses passos, verifique o status da instalação, digitando: ng –v
O comando ng é um álias global para executar os comandos do angular-cli.
E para deixar o ambiente completo, digite na linha de comando para instalar o TypeScript:
npm install –g typescript. Após finalizar, utilize o comando : tsc -v e confirme a instalação.
Com o Eclipse ou outra IDE de sua preferência é possível abrir e trabalhar em seus projetos,
mas, como editor de texto para codificar e gerenciar o seu desenvolvimento angular é
interessante baixar o Visual Studio code (https://code.visualstudio.com/). Pelas seguintes
razões:
1º - IntelliSense – Destaca a sintaxe do código e auxilia no preenchimento automático de
alguns comandos. Sendo desnecessário digitar alguns comandos por inteiro.
2º - Debugging – Facilita o desenvolvimento e gerencia os bugs em testes dev.

5. Configurando ambiente de desenvolvimento Angular 4 e Typescript
Edenizia Costa – Analista e Desenvolvedora de Sistemas
3º - Built-in Git – Integração com o Git para gerenciar as versões de desenvolvimento.
4º - Extensões – Facilidade para incluir extensões de maneira prática. Que podem ser auxiliar
no desenvolvimento de aplicativos.
Mas atenção: Caso deseje também pode usar os editores de texto: Sublime text e o Atom. É
uma escolha pessoal para seu desenvolvimento.
Criando sua aplicação Angular
Antes de tudo, decida onde colocará seus projetos/aplicações:
Sugestão - C:angularprojetos
Crie uma pasta para adicionar suas aplicações (projetos) angulares.
Obs.: Caso queira fazer em outro local, tenha cuidado para não deixar espaços ou caracteres
especiais entre o caminho dos diretórios. Isso porque o angular passa por um processo de
compilação do webpack. E a ocorrência desses espaços ou caracteres especiais podem gerar
erros na construção dos pacotes (bundles).
Acesse o diretório a partir da linha de comando:
A partir do comando ng crie sua aplicação.
ng new nome_app
O nome de sua aplicação também será o nome do novo diretório que será criado dentro de
sua pasta de projetos.
Com este comando o angular-cli vai baixar todas as dependências necessárias para o
desenvolvimento da aplicação angular. No final já teremos uma aplicação inicial funcional que
pode ser testada e ajustada conforme o escopo do projeto que pretendemos construir.
Para testar digite o comando: ng serve, e aguarde a compilação com sucesso.
E no seu navegador preferido acesse o http://localhost:4200 para verificar a sua versão inicial
renderizada.
Você deve acessar o diretório de sua aplicação a partir de seu editor de texto ou IDE preferida
e iniciar o desenvolvimento de seu projeto.
No próximo material continuamos explorando o desenvolvimento com o angular, utilizando
seus recursos e entendendo suas funcionalidades. Até a próxima...