我开发了一个教程应用程序，并按照指南将其托管在 gh-pages 上。为什么现在路由乱了？

Question

应用源代码：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-app/
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 控制台，我发现路由也有问题。我可以看到路由存在问题，但我终生无法弄清楚如何解决它。我已经尝试过 4 次使用 ng 和 ng 的 gh-pages 命令行实用程序来重建和保留，但没有修复它。我对 Angular 和其中的路由经验不足。

任何人都可以告诉我如何修复此路由，以便应用程序正常运行并从 https://shardul-shah.github.io/first-angular-app/ 开始运行吗？

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

谢谢！

Answer 1

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

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

第二个问题的解决方案：

1. 在任何路由上刷新都会出现空白页面白屏。这是因为您没有在 angular.

   中使用 useHashStretegy

2. 您必须在 angular 应用程序中使用 useHash 策略，例如：

   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 })

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

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

第 3 个问题的解决方案

我希望如果你的前两个问题得到解决，那么第三个问题也会自动得到解决。

注：

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