Angular 服务器端呈现 (SSR) 未加载内页/子页 html

Question

我的 angular 应用加载方式出现问题。由于某种原因，无论路由如何在线查看应用程序，html 结构默认为基本路径。

现在假设在我的路由中我有 2 个页面：主页 (/) 和事件 (/events)。

当我尝试使用 facebook open graph scrapper 或什至只是 view-source:https://mysite/events 我看到的结果是主页 (/) 而不是 /events

更令人费解的是

dist 目录中的实际呈现 /events html 文件具有正确的 html 数据，但在在线查看或如上所述进行报废时，它显示主页html结构
即使在浏览器上加载 https://mysite/events - 正确显示预期页面，但在 ctrl + u 检查时，同样的问题 - html 结构属于主页

这与 angular 加载应用程序的方式有什么关系还是其他什么？我怎样才能确保正确的 html 数据被 scrapers 或什至只是通过查看来源获取？

以防路由信息可能有所帮助，这里是：

const routes: Routes = [
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      {
        path: 'events',
        children: [
          { path: '', component: EventsComponent},
        ]
      },
      { path: '', component: HomeComponent, pathMatch: 'full'},
    ]
  },
  { path: '**', redirectTo: '' }
];

Answer 1

我认为除了 HomeComponent 之外，您还可以使用 EventComponent 路由。

const routes: Routes = [
  {
    path: '',
    component: SiteLayoutComponent,
  },
  {
    path: 'events',
    component: EventsComponent,
  },
  { path: '**', redirectTo: '' }
];

Answer 2

我在我的本地 Apache 服务器和另一个站点（原来使用的是 Apache）上测试了 Web 应用程序，路由在这两种情况下都工作正常。

所以问题原来是 nginx 配置将请求重定向到根索引（然后到请求的页面）而不是直接转到子目录索引。

因此，如果您有类似 site.com/events 的请求 - 在 nginx 上，请求将加载主 index.html，然后以编程方式加载用户的请求 (/events)，而在apache 它将直接转到在 /events

中找到的索引

这解释了为什么 open graph scrapper 甚至 ctrl + u 会在主索引文件而不是事件索引文件中找到元标记数据

Angular 服务器端呈现 (SSR) 未加载内页/子页 html

Angular Server Side Rendering (SSR) not loading html for inner / child pages

angular

angular-routing

server-side-rendering

angular-universal