Repository files navigation

Para começar a utilizar oPO UI é pré-requisito ter oNode.js instalado (versão 18.19.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote@angular/cli, instale-o vianpm ouyarn.

Instalando com npm:

npm i -g @angular/cli@19

Caso prefira instalar com o yarn:

yarn global add @angular/cli@19

Caso você já tenha um projeto criado e deseje apenas incluir oPo, pule esta etapa e vá para oPasso 1.1.

OAngular CLI se encarrega de construir toda estrutura inicial do projeto. Para isso, execute o seguinte comando:

ng new my-po-project --skip-install

O parâmetro--skip-install permite criar o projeto, contudo, não instalará as dependências automaticamente.

Antes de executar a instalação ou inserir oPo no seu projeto existente, é necessário verificar as dependências do seu projeto, algumas delas precisam estar de acordo com a versão doPo e Angular (elas podem ser encontradas no arquivopackage.json localizado na raiz da aplicação).

Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser conferidas e se necessário, ajustadas no seu projeto.

"dependencies": {"@angular/animations":"~19.0.0","@angular/common":"~19.0.0","@angular/compiler":"~19.0.0","@angular/core":"~19.0.0","@angular/forms":"~19.0.0","@angular/platform-browser":"~19.0.0","@angular/platform-browser-dynamic":"~19.0.0","@angular/router":"~19.0.0","rxjs":"~7.8.0","tslib":"^2.3.0","zone.js":"~0.15.0"...  },"devDependencies": {"@angular-devkit/build-angular":"~19.2.3","@angular-devkit/schematics":"~19.0.5","@angular/cli":"~19.0.5","@angular/compiler-cli":"~19.0.0",..."typescript":"~5.6.2"  }

Após verificar se estas dependências do seu projeto estão com as versões compatíveis declaradas acima, acesse a pasta raiz do seu projeto e execute o comando abaixo:

Instalando com npm:

npm install

Caso utilizar a versão 7 do npm pode ocorrer erro de versão das dependências, neste caso utilizenpm install --legacy-peer-deps.

Caso prefira instalar com o yarn:

yarn install

Utilizando o comandong add doAngular CLI, vamos adicionar oPo em seu projeto e o mesmo se encarregará de configurar o tema, instalar o guia de primeiros passosPo. Além de importar também o moduloHttpClientModule.

Execute o comando abaixo na pasta raiz do seu projeto:

ng add @po-ui/ng-components

Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes doPo,caso desejar, apenas informe:Y.

Agora basta executar mais um comando para subir a aplicação e ver o seu projeto rodando nobrowser ;).

ng serve

Abra obrowser e acesse a urlhttp://localhost:4200. Pronto!

Agora é só abrir seueditor / IDE favorito e começar a trabalhar no seu projeto.

Caso você queira utilizar nossos componentes de templates, como opo-page-login,po-modal-password-recovery,po-page-blocked-user,po-page-dynamic-table entre outros, basta adicionar o pacote@po-ui/ng-templates executando o comando abaixo:

ng add @po-ui/ng-templates

Ao executar este comando, será instalado o pacote@po-ui/ng-templates e configurado oPoTemplatesModules noapp.module.

A partir dai o seu projeto está preparado para receber outros componentes doPO UI! \o/