COMO POSTAR UM PROJETO ANGULAR NO GITHUB PAGES

Postar um projeto angular no Github pages pela primeira vez pode ser um pouco chato, as vezes dá o famoso 404, as imagens bugam etc.

Aprendi a fazer isso do jeito certo e gostaria de compartilhar com vocês.

Somente depois de você terminar seu projeto e mergear as branchs na main faça a build.

Primeiramente vamos instalar o cli do githubpages, com o comando:

npm install -g angular-cli-ghpages

Depois disso vamos digitar o seguinte comando no terminal:

ng build --configuration=production --output-path docs --base-href /nome-repositório/

ATENÇÃO!

Em nome-repositório você substituíra pelo nome definido no seu repositório!

Após buildar você irá fazer os comandos:

git add .
git commit -m "feat: build-projeto-angular"
git push 

Agora temos que ir no repositório que você deseja subir para o github pages e ir em:

Settings > Pages

Coloque deploy from a branch, troque o /root para /docs e aperte em Save.

Pronto, seu projeto irá subir para o github pages em alguns minutos e você poderá ver o link logo acima:

Seguindo este tutorial provavelmente você conseguirá subir sem problemas, espero ter ajudado.

Agora arrumando imagens quebradas, normalmente quando colocamos alguma imagem no angular, utilizamos a pasta /assets, e para isso regredimos até essa pasta "/assets" com os ../../.. caso suas imagens quebrem você pode tentar colocar a pasta diretamente ao invés de regredir para achar as imagens

MODO ERRADO:

<img src="../../../assets/pokedex-logo.png" alt="logo pokedex">

MODO CORRETO:

<img src="assets/pokedex-logo.png" alt="logo pokedex">

Feito isso provavelmente irá corrigir, obrigado!