2

I've been trying to deploy a small Angular app on GithubPages, but im having some trouble with relative links.

For example, there is a link that opens in a new tab, works perfectly locally. But on github pages it returns an 'error404'.

  <a href="\assets\pdfs\geography\unit_1\economias_regionales.pdf" target="_blank">
     <mat-icon aria-hidden="false" aria-label="pdf-icon">picture_as_pdf</mat-icon>Regional Economies
  </a>

I've already checked the documentation , and tried making a mirror 404.html but didn't work.

I've also tried the solution requested in Deploy Angular 7 to github pages but it didn't work too, maybe im getting it wrong.

The full project is here.

Any recommendations? Thanks for your time

Fabiola Chazarreta
  • 63
  • 4

2 Answers2

3

Remove the leading / from the href, as this modifies what the link is relative to.

<a href="assets/pdfs/geography/unit_1/economias_regionales.pdf" target="_blank"></a>

This answer explains it fairly well.

  • Links with leading / are relative to the root of the web site. In your case, the link ends up incorrect:

    https://fabichazaa.github.io/assets/pdfs/geography/unit_1/economias_regionales.pdf

  • Links without leading / are relative to your app's <base href=""> tag. In your case, the link ends up correct:

    https://fabichazaa.github.io/schoolsystem/assets/pdfs/geography/unit_1/economias_regionales.pdf

You're seeing it work locally because in that case, the application happens to be served at the root of the web site.

Zack Ream
  • 2,956
  • 7
  • 18
0

Try switching to Hash based location strategy https://angular.io/api/common/HashLocationStrategy

William
  • 491
  • 5
  • 9