-1

应用程序源代码：https ://github.com/shardul-shah/first-angular-app

它适用于 gh-pages ......有点（https://shardul-shah.github.io/first-angular-app/）

问题：

  1. 当转到https://shardul-shah.github.io/first-angular-app/时，URL 会自动更改为https://shardul-shah.github.io/first-angular-app/first-angular -应用程序/
  2. 刷新https://shardul-shah.github.io/first-angular-app/first-angular-app/（或任何路线上的任何刷新）会导致白色的空白屏幕。
  3. 当我单击https://shardul-shah.github.io/first-angular-app/first-angular-app/中的“我的商店”时，该应用程序有效，但并非没有。

我看到了 JS 控制台，我发现我也遇到了路由问题。我可以看到路由存在问题，但我一生都无法弄清楚如何解决它。我已经尝试使用 ng 和 ng 的 gh-pages 命令行实用程序进行 4 次重建和保留，但它没有修复它。我对 Angular 和路由的缺乏经验很痛苦。

谁能告诉我如何修复此路由，以使应用程序正常运行并从https://shardul-shah.github.io/first-angular-app/运行？

仅供参考，它适用于 stackblitz，我最初在该应用程序上工作： https ://angular-n2rqei.stackblitz.io和https://stackblitz.com/edit/angular-n2rqei?file=src/app/app.module .ts

谢谢！ GitHub 设置（页面）

4

1 回答 1

1

解决方案： 第一个问题的解决方案：

  1. 您可以在 base 的 src/index.html 中再添加一个文件夹。这就是为什么它在这个 url 之后加载所有路由。（检查屏幕截图）[使用 ./ 在 base 而不是 github 文件夹或其他任何东西]

在此处输入图像描述

第二个问题的解决方案：

  1. 在任何路线上刷新都会获得页面空白屏幕。这是因为你没有在你的角度使用 useHashStretegy 。

  2. 您必须在您的角度应用程序中使用 useHash stretegy，例如：

    RouterModule.forRoot(routes, { useHash: true })

在你这样的情况下：

RouterModule.forRoot([
  { path: '', component: ProductListComponent },
  { path: 'products/:productId', component: ProductDetailsComponent },
  { path: 'cart', component: CartComponent },
  { path: 'shipping', component: ShippingComponent }
], { useHash: true })

注意：如果您不希望 Hash(#) 在您的 url 中，那么您必须设置.htaccess可以将所有请求重定向（重写 URL）到 angular build 的 index.html 文件的文件。但这不是 github 允许的，因此您必须为此使用专用服务器。有关重写规则的更多信息在这里：服务器配置

有关此链接的更多信息：https ://medium.com/@dao.houssene/angular-the-hash-trap-b2d415c2c241

第三个问题的解决方案

我希望如果您的前两个问题能够解决，那么第三个问题将自动修复。

笔记：

我还在 github 上使用 angular 设置了这种页面。你可以检查我的代码和回购。形成这个包：https ://www.npmjs.com/package/rotate-control

于 2021-07-14T05:23:51.753 回答