quarta-feira, 19 de fevereiro de 2020

Criando um Projeto Angular com PrimeNG

O PrimeNG é uma versão do antigo Primefaces para o Angular. A documentação pode ser acessada em:

https://primefaces.org/primeng/#/

Quando estamos criando um novo projeto executamos alguns passos sequencialmente. A etapa de inicio de um novo projeto muitas vezes consiste em executar tais passos exaustivamente para criar diversos projetos a fim de executar testes isolados. Para facilitar essa tarefa resolvi fazer esse post, para ter os passos sequenciais de criação de projeto descritos, para acessar de forma fácil e não ter que ficar procurando os comando toda vez que se cria um novo projeto, então segue a sequencia abaixo.

Os passos foram executados em uma máquina Windows.

Inicialmente verifique se o Nodejs já está instalado.

Verificar se o node está instalado
> node -v

Instalar a última versão de angular CLI usado para instalação automática de pacotes via linha de comando

Instala o CLI Angular
> npm install -g @angular/cli@latest

Cria um novo projeto Angular
> ng new nomeProjeto

Acessa a pasta do projeto
> cd nomeProjeto

Para levantar o servidor dentro da pasta do projeto
> ng serve

ctrl+c para encerrar o servidor

Instalar o Primeng
> npm install primeng --save

Intalar Prime Icons
> npm install primeicons --save

No arquivo angular.json do projeto criado insere em style o bloco primeng conforme a documentação Get Started.

"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],


Feito isso, temos um projeto Angular com PrimeNG preparado para testes.

Documentação PrimeNG Get Started: