Angular 通用SSR动态绝对base-herf路径

Question

嘿，我有基于此的应用程序 starter kit

我使用 server.ts 的 SSR 功能部署我的应用程序。

并且该应用程序正在 "dynamically" 使用 Apache 反向代理为多个域 localhost:4002 提供服务。

即 domainA.com 并且 domainB.com 指向与 rev 代理相同的 localhost:4002。所有域都使用相同的 App 实例到目前为止一切顺利。

但现在我需要它在我们的合作伙伴反向代理下工作，看起来像这样 partner.com/app/ 将反向代理到 partner.domainA.com

导致加载JS时出现很多问题

目前 base-href 设置为 /，这在我们的网站上非常有效。但是当用户转到 partner.com/app 时，浏览器会尝试从 partner.com/*.js 加载所有 JS 资产，而这些资产仅在 partner.com/app/*.js 或 partner.domainA.com/*.js.

上可用

我可能的解决方案是在请求到达时从 server.ts 设置 APP_BASE_HERF。

但我尝试的每件事似乎都不起作用。

我试着按照这个 guide 但它似乎没有用，它正在从 window 对象加载 url 而我需要从原始主机设置它仅可从 req.headers.host

在 server.ts:

  res.render(
'../dist/index',
{
  req: req,
  res: res,
  // provers from server
  providers: [
    // for http and cookies
    {
      provide: REQUEST,
      useValue: req,
    },
    {
      provide: RESPONSE,
      useValue: res,
    },
    /// for cookie
    {
      provide: NgxRequest,
      useValue: req,
    },
    {
      provide: NgxResponce,
      useValue: res,
    },
    // for absolute path
    {
      provide: 'ORIGIN_URL',
      useValue: `${http}://${req.headers.host}`,
    },
  ],
},

有没有办法将 ORIGIN_URL 放入 index.html base-herf？以这种方式设置 base-herf 的正确方法是什么？

谢谢

Answer 1

将您的 main.ts 更改为：-

 window['base-href'] = window.location.pathname;
 if (env.production) {
    enableProdMode();
 }
 platformBrowserDynamic().bootstrapModule(AppModule);

在上面的代码中，将 url 更改为您的 base-href json 所在的位置。

在 appModule 中添加此提供程序：-

providers: [
  {
    provide: APP_BASE_HREF,
    useValue: window['base-href']
  }
  ]

Angular 通用SSR动态绝对base-herf路径

Angular universal SSR dynamic absolute base-herf path

express

server-side-rendering

angular-universal

angular