当我在 URL 末尾添加“/”时，Angular 应用程序加载异常

Question

我有一个问题。它刚刚发布了我的第一个项目，现在我意识到如果你在 URL 末尾添加一个“/”，它会以一种非常不同的方式加载，我什至无法解释。当您添加“Trailingslash”时，网站的某些按钮不可单击，如果我使用 ngserve 执行此操作，字体会发生变化，我无法单击按钮，并且侧面会出现白色边框。您可以在 https://22ndspartans.de 上自行尝试，该问题仅出现在 https://22ndspartans.de/discord 的不和谐页面上，并且问题会通过 https://22ndspartans./discord/ 出现。

我在本地主机上尝试过，我尝试使用其他浏览器和其他设备来执行此操作。我在设置谷歌搜索索引时发现了这个问题。当我直接从搜索结果中单击我的 Discord 页面时，它不会加载任何背景图像。一开始这个问题也在其他页面上。我完全困惑了。 抱歉我的英语不好，我尽力解释了。 ---->

编辑：我发现在已发布的版本中，当您在任何其他页面上有尾部斜杠时，主页的锚点不起作用。其余的似乎正在发挥作用。我使用 cloudflare 进行托管。也许这也与谷歌搜索有关。我不知道

第二次编辑：Google 搜索问题已解决，但我不知道如何解决。休息了还是不行。

Answer 1

以下是一些可能的原因和解决方案：

1. Angular 路由配置：确保正确设置路由配置以处理尾部斜杠。您可以通过在路线配置中将

   trailingSlash

   选项设置为

   true

   或

   false

   来完成此操作。例如：

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent,
        pathMatch: 'full',
        trailingSlash: true // or false
      }
    ])
  ]
})

这将告诉 Angular 添加或删除 URL 中的尾部斜杠。

请参阅此博客的尾部斜杠。

2. 服务器配置：如果您使用服务器端渲染（SSR）设置，您的服务器配置可能会影响 Angular 处理路由的方式。确保您的服务器配置为正确处理尾部斜杠。例如，如果您使用 Node.js 和 Express.js，则可以使用

   express-urlrewrite

   包重写 URL 并删除结尾斜杠。
3. HTML 基本标签：

   tag in your HTML header can also affect how Angular handles routes. Make sure that the

   标签设置为正确的 URL，包括尾部斜杠。例如：

4. CSS 和布局问题：按钮可点击性和字体更改问题可能与 CSS 和布局问题有关。确保您的 CSS 已正确加载，并且不存在导致按钮无法点击的布局问题。
5. ng 服务：使用

   ng serve

   时，Angular 使用的开发服务器有时会与生产环境表现不同。尝试使用

   ng build

   构建您的应用程序，并通过生产服务器为其提供服务，看看问题是否仍然存在。