Repository files navigation

Para começar a utilizar oPO UI é pré-requisito ter oNode.js instalado (versão 14.20.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@^15

Caso prefira instalar com o yarn:

yarn global add @angular/cli@^15

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 --skipInstall

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": "~15.0.3",    "@angular/common": "~15.0.3",    "@angular/compiler": "~15.0.3",    "@angular/core": "~15.0.3",    "@angular/forms": "~15.0.3",    "@angular/platform-browser": "~15.0.3",    "@angular/platform-browser-dynamic": "~15.0.3",    "@angular/router": "~15.0.3",    "rxjs": "~7.5.5",    "tslib": "^2.3.0",    "zone.js": "~0.12.0"    ...  },  "devDependencies": {    ...    "typescript": "~4.8.4"  }

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 pacote e importar o módulo doPo.

Execute o comando abaixo na pasta raiz do seu projeto:

ng add @po-ui/ng-components@next

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@next

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/