1

Estou desenvolvendo uma aplicação que usará o Jekyll com seus temas como base do site, porém, preciso criar um layout do jekyll <jekyll_root>/_layout/angular.html que será carregado para as páginas que usam o Angular, conforme a respectiva diretiva.

Sendo assim preciso que ao invés do Angular ao construir a aplicação (ng build) gere o arquivo index.html conforme o padrão e os arquivos js, ele gere um arquivo na pasta <jekyll_root>/_layout com o nome angular.html, já os arquivos JavaScript (js) devem ser gravados na pasta <jekyll_root>/assets/js/angular.

Os demais arquivos devem ser copiados para pastas respectivas, como "images" para <jekyll_root>/asset/images, "css" para pasta <jekyll_root>/asset/css, etc.

Quais as configurações devem ser feitas no Angular para este comportamento?

4
  • O projeto e seu código está sendo publicado no github em https:/github.com/StreetPet, o projeto é opensource e openhardware.
    – Delfino
    25/01/2020 às 3:44
  • Vc precisa MESMO usar o Jekyll e angular? Um dos problemas que vc vai enfrentar é que os dois usam chaves nos templates, sendo assim, o Jekyll vai remover coisas como {{exemplo}}. Para que os 2 funcionem juntos será necessário alterar todas as tags de angular para diferenciá-las das tags do Jekyll.
    – tvdias
    25/01/2020 às 12:43
  • Realmente isso pode vir a atrapalhar, mesmo, mas no estágio que estou basta que eu consiga gerar um novo layout par ao Jekyll, ou seja gravar o html na pasta _layout e os scripts na pasta js/angular conforme o projeto de app, já que cada app vai gerar um layout.
    – Delfino
    25/01/2020 às 23:04
  • No momento estou copiando tudo para uma pasta dentro de _site e fazendo o deploy no servidor,
    – Delfino
    25/01/2020 às 23:05

1 Resposta 1

0

Eu encontrei a seguinte solução.

Criei um workspace do angular com o comando ng new --skip-tests --skip-install Jekyll --directory . --defaults no próprio diretório de trabalho do Jakyll, então editei o arquivo angular.json e alterei as seguintes propriedades:.

"aot": true,
"optimization": true,
"sourceMap": false,
"buildOptimizer": true,
"outputPath": "app/voluntarios",
"baseHref": "/app/voluntarios/",

Em especial outputPath que apontei para o diretório onde ficará os arquivos compilados do angular dentro do Jekyll antes do build dele. Alterei a diretiva baseHref para apontar a URL base que será o resultado final depois do build do Jekyll.

Também ajustei as seguintes propriedades, com relação a pasta onde está meu projeto do Angular:

"index": "../Angular/projects/JekyllFirebaseVoluntarios/src/index.html",
"main": "../Angular/projects/JekyllFirebaseVoluntarios/src/main.ts",
"polyfills": "../Angular/projects/JekyllFirebaseVoluntarios/src/polyfills.ts",
"tsConfig": "../Angular/projects/JekyllFirebaseVoluntarios/tsconfig.app.json",
"assets": [""],
"styles": [""],
"scripts": [""]

Então apontei cada uma para a pasta onde está o projeto que resultará nos arquivos usados pelo Jakyll.

Finalmente executo o Jekyll e deixo ele monitorando as alterações e continuo meu trabalho com angular em outro terminal, onde deixo o angular também monitorando as alterações, mas não com o comando ng server, mas sim com ng build, veja que tanto o comando do Jekyll como do Angular são executados na pasta de trabalho do angular.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .