Nesse vídeo será demonstrado em como criar uma tela do zero em PO UI com Angular e colocar dentro do Protheus usando protheus-lib-core.
Abaixo o vídeo do nosso canal no YouTube:
Abaixo a lista do passo a passo executado no vídeo:
npm i -g @angular/cli@19 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted ng new Prj_ConsultaTransportadoras --skip-install [editar package.json e definir dependências] npm install ng add @po-ui/ng-components npm i @totvs/po-theme [editar angular.json e definir estilos] npm i subsink npm i @totvs/protheus-lib-core@latest --force [criar appConfig.json e editar angular.json na parte de assets, e adicionar provider] ng generate component components/about ng generate component components/view [edição dos fontes] ng serve [testar no navegador] ng test [validar o resultado dos testes] ng build
E abaixo os links referenciados no vídeo:
- Download do node.js: https://nodejs.org/en/download
- Primeiros passos com PO UI: https://po-ui.io/guides/getting-started
- Documentação TDN: https://tdn.totvs.com/pages/releaseview.action?pageId=911865819
- Tema da TOTVS: https://github.com/totvs/po-theme-totvs
- Curso PO UI com cadastro e browse: https://tipremium.com/page.php?slug=curso-poui
- eBook sobre PO UI: https://www.amazon.com.br/PO-UI-Desenvolvendo-Protheus-Angular-ebook/dp/B0DFCV2R1L/
- Aula sobre criação de APIs no Protheus: https://terminaldeinformacao.com/2025/06/07/criando-e-depurando-apis-em-webservice-rest-no-protheus-via-advpl-tlpp-ti-especial-0004/
- Códigos fontes desse projeto no GitHub: https://github.com/dan-atilio/Consulta-Transportadoras-PO-UI
- Gerador de códigos Autumn Code Maker: https://autumncodemaker.com/
- Documentação PO UI: https://po-ui.io/documentation
- Extensão para pesquisa de tabelas no Protheus: https://atiliosistemas.com/portfolio/tabelas-e-parametros-do-protheus/
Bom pessoal, por hoje é só.
Abraços e até a próxima.
Bom dia Daniel,
Excelente este projeto da transportadora.
Parabéns.
Bom dia, tudo joia?
Opa, agradecemos pelo comentário e feedback.
Ficamos felizes que tenha gostado.
Tenha uma ótima e abençoada terça feira.
Um forte abraço.
Boa Tarde Daniel tudo bem,
Este mini curso que voce disponibilizou no youtube, não esta na hotmart, estou perguntando porque tentei reproduzi e não deu certo por isso fui procurar na seção hotmart.
Obrigado e bom final de semana.
Bom dia, tudo joia graças a Deus e você?
Esse não está lá.
Esse foi um especial para o YouTube mesmo.
Mas se precisar os fontes estão lá no GitHub: https://github.com/dan-atilio/Consulta-Transportadoras-PO-UI
Tenha um ótimo e abençoado fim de semana.
Um forte abraço.
Boa tarde Daniel tudo bem,
Não sei se você pode ajudar mas estou tentando fazer este projeto e não deu certo, foi comparando arquivo por arquivo ate descobrir que, o meu problema esta quando libero as linhas do construtor ai já não estou conseguindo seguir com o projeto.
Esta dando a seguinte mensagem: X [ERROR] TS2304: Cannot find name ‘Router’. [plugin angular-compiler]
src/app/app.component.ts:33:80:
33 │ …roAppConfigService: ProAppConfigService, private router: Router) {
Bom dia Wanderson, tudo joia graças a Deus e você?
É a parte 8 do vídeo (aproximadamente em 25:00), que explica sobre o Router, parece que no seu projeto ele não está instalado.
Veja se todos os comandos foram executados (até o subsink e o protheus-lib-core@latest).
E se no import, está referenciado o Router (linha 3 do fonte app.component.ts – https://github.com/dan-atilio/Consulta-Transportadoras-PO-UI/blob/main/src_angular_po_ui/src/app/app.component.ts ).
Tenha uma ótima e abençoada semana.
Um forte abraço.
Boaaa, muito boa aula!
Consegue ajudar com um problema ?
Depois que add o constructor no app.component.ts a pagina ficou em branco, quando tiro o constructor a pagina apresenta o layout.
Acredito que seja algo com o Router, mas já fiz de tudo e ainda não identifiquei a causa.
Bom dia Elvis, tudo joia?
Opa, obrigado pelo feedback.
No caso, ao carregar a página no navegador, se você abrir as ferramentas de desenvolvimento (o atalho -F12- no Firefox), vai na aba Console e veja se tem alguma mensagem de erro.
Tenha uma ótima e abençoada quarta feira.
Um forte abraço.
Erro similar ao do Elvis:
core.mjs:6643 ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ProAppConfigService -> _ProAppConfigService -> _ProThemeService -> _ProUserProfileService -> _PoI18nService -> _PoI18nService]:
NullInjectorError: No provider for _PoI18nService!
at NullInjector.get (core.mjs:1644:21)
at R3Injector.get (core.mjs:2168:27)
at R3Injector.get (core.mjs:2168:27)
at injectInjectorOnly (core.mjs:1100:36)
at ɵɵinject (core.mjs:1106:40)
at Object.ProUserProfileService_Factory [as factory] (totvs-protheus-lib-core.mjs:3911:94)
at core.mjs:2281:35
at runInInjectorProfilerContext (core.mjs:871:5)
at R3Injector.hydrate (core.mjs:2280:11)
at R3Injector.get (core.mjs:2159:23)
handleError @ core.mjs:6643
main.ts:6 NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ProAppConfigService -> _ProAppConfigService -> _ProThemeService -> _ProUserProfileService -> _PoI18nService -> _PoI18nService]:
NullInjectorError: No provider for _PoI18nService!
at NullInjector.get (core.mjs:1644:21)
at R3Injector.get (core.mjs:2168:27)
at R3Injector.get (core.mjs:2168:27)
at injectInjectorOnly (core.mjs:1100:36)
at ɵɵinject (core.mjs:1106:40)
at Object.ProUserProfileService_Factory [as factory] (totvs-protheus-lib-core.mjs:3911:94)
at core.mjs:2281:35
at runInInjectorProfilerContext (core.mjs:871:5)
at R3Injector.hydrate (core.mjs:2280:11)
at R3Injector.get (core.mjs:2159:23)
(anônimo) @ main.ts:6
[NOVO] Explique os erros do Console usando o Copilot no Edge: clique em
para explicar um erro.
Saiba mais
Bom dia Juliano, tudo joia?
Qual versão do Angular você está usando?
Por exemplo, se abrir o prompt de comando e digitar “ng version” (sem as aspas), o Angular CLI, está vindo como?
É que uma das possibilidades, pode ser a incompatibilidade entre a versão do Angular com a do PO UI, por exemplo, estar usando o Angular 20, mas na documentação do PO UI é recomendado o 19.
Se o comando ng version trazer uma versão diferente mesmo da 19, recomendo desinstalar o Angular e instalar através do comando que foi mostrado no vídeo e também na documentação – https://po-ui.io/guides/getting-started, que é:
npm i -g @angular/cli@19
Ai crie o projeto novamente.
Ficamos no aguardo do feedback.
Tenha uma ótima e abençoada quinta feira.
Um forte abraço.
Angular CLI: 19.2.15
Node: 22.17.1
Package Manager: npm 10.9.2
OS: win32 x64
Angular:
…
Package Version
——————————————————
@angular-devkit/architect 0.1902.15 (cli-only)
@angular-devkit/core 19.2.15 (cli-only)
@angular-devkit/schematics 19.2.15 (cli-only)
@schematics/angular 19.2.15 (cli-only)
Bom dia Juliano, tudo joia?
Vi aqui que o dragon mandou uma sugestão de solução.
Depois tenta fazer o procedimento que foi mencionado.
Tenha uma ótima e abençoada sexta feira.
Um forte abraço.
Boa Tarde Elvis, tenta instalar npm install @angular/router
Bom dia, tudo joia?
Opa, ótima dica do Router.
Obrigado pelo comentário.
Tenha uma ótima e abençoada quinta feira.
Um forte abraço.
Bom dia Pessoal,
Instalei o npm install @angular/router e funcionou conforme o video porem temos alguns erros na console que ainda não consegui identificar mas acredito que ja da para dar sequencia no projeto.
Abraço a todos.
Bom dia Wanderson, tudo joia?
Opa, obrigado pelo feedback, se for o caso, poste os erros aqui, para ver se conseguimos identificar alguma coisa.
Tenha uma ótima e abençoada sexta feira.
Um forte abraço.
Boa Tarde a todos,
Elvis eu tambem estava com este mesmo problema de tela Branca, altera seu app.config.ts para isso
import { ApplicationConfig, importProvidersFrom } from ‘@angular/core’;
import { provideRouter } from ‘@angular/router’;
import { provideHttpClient, withInterceptorsFromDi } from ‘@angular/common/http’;
import { provideZoneChangeDetection } from ‘@angular/core’;
import { routes } from ‘./app.routes’;
// Módulos PO UI
import { PoI18nModule, PoHttpInterceptorModule, PoHttpRequestModule } from ‘@po-ui/ng-components’;
// Protheus Core
import { ProtheusLibCoreModule } from ‘@totvs/protheus-lib-core’;
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient(withInterceptorsFromDi()),
importProvidersFrom([
ProtheusLibCoreModule,
PoHttpRequestModule,
PoHttpInterceptorModule,
PoI18nModule
]),
provideZoneChangeDetection({ eventCoalescing: true }),
{ provide: “Window”, useValue: window },
]
};
No seu app.routes.ts deixa assim
import { Routes } from ‘@angular/router’;
import { AboutComponent } from ‘./components/about/about.component’;
import { ViewComponent } from ‘./components/view/view.component’;
export const routes: Routes = [
{ path: ”, redirectTo: ‘about’, pathMatch: ‘full’ },
{path: ‘about’, title: ‘Sobre o Projeto’, component: AboutComponent},
{path: ‘view’, title: ‘Visualização do Cadastro’, component: ViewComponent}
];
Feito isso so testar. Abraço.
Bom dia dragon, tudo joia?
Opa, excelente dica. Obrigado pela contribuição.
Vamos aguardar o feedback agora.
Tenha uma ótima e abençoada sexta feira.
Um forte abraço.
Deu certo!
Obrigado
Ai sim Dragon, deu certo, muito obrigado!
Bom dia Daniel tudo bem,
Api 100% funcional conforme resultado do postman, porem quando informo o código no formulário ele não traz o resultado, só está falta isso para o projeto ficar 100% conforme o Vídeo.
Bom dia dragon, tudo joia graças a Deus e você?
No momento que estiver digitando no campo, pressiona -f12- no navegador, e vai na parte de rede.
Nisso veja em qual URL e porta que ele está tentando acionar o consumo da API.
Pois pode ser algumas coisas como:
1. appConfig.json apontando para outra url e porta
2. o httpOptions e URL que estão sendo enviados no GET
Ficamos no aguardo.
Tenha um ótimo e abençoado fim de semana.
Um forte abraço.
Boa Tarde Daniel tudo bem,
Acabei de fazer o teste e ele esta pegando do http://localhost:4200/view
Dei continuidade ao projeto, mas ainda sem sucesso. Inicialmente, encontrei um bloqueio ao tentar acessar a URL. Para resolver isso, criei um arquivo de configuração de proxy na raiz do projeto. Após configurar corretamente, a aplicação passou a reconhecer a URL. Se eu testar a URL diretamente no navegador, os dados da transportadora são retornados corretamente. No entanto, no formulário do Angular, a requisição ainda não tem sucesso.
Bom dia dragon, tudo joia graças a Deus e você?
Que estranho, ele não tá conseguindo pegar a URL e porta do REST então.
Na requisição do http, como estão as variáveis, tipo a url? Se colocar um alert ou um console.log nela, ela traz corretamente a URL e porta buscadas do appConfig.json?
Tenha uma ótima e abençoada quarta feira.
Um grande abraço.