Github 页面中的 Angular 路由答案

【问题标题】：Angular Routing in Github PagesGithub 页面中的 Angular 路由
【发布时间】：2021-09-30 00:51:38
【问题描述】：

我一直在尝试在 GithubPages 上部署一个小型 Angular 应用，但我在相关链接方面遇到了一些问题。

例如，有一个在新选项卡中打开的链接，可以在本地完美运行。但在 github 页面上它返回一个 '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>

我已经检查了documentation，并尝试制作镜像404.html但没有成功。

我也尝试了Deploy Angular 7 to github pages 中要求的解决方案，但也没有用，可能是我弄错了。

完整的项目是here。

有什么建议吗？感谢您的宝贵时间

【问题讨论】：

标签： angular routes

【解决方案1】：

从 href 中删除前导 /，因为这会修改链接的相关内容。

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

This answer explains it fairly well.

以/ 开头的链接相对于网站的根。在您的情况下，链接最终不正确：
```
https://fabichazaa.github.io/assets/pdfs/geography/unit_1/economias_regionales.pdf
```
没有前导 / 的链接与您应用的 <base href=""> 标记相关。在您的情况下，链接最终是正确的：
```
https://fabichazaa.github.io/schoolsystem/assets/pdfs/geography/unit_1/economias_regionales.pdf
```

您会看到它在本地工作，因为在这种情况下，应用程序恰好在网站的根目录中提供服务。

【讨论】：

【解决方案2】：

尝试切换到基于哈希的定位策略https://angular.io/api/common/HashLocationStrategy

【讨论】：