Angular universal SSR dynamic absolute base-herf path

Question

Hey I have App based on this starter kit

I deploy my app with the SSR feature from server.ts.

and the app is being served "dynamically" with Apache reverse proxy to localhost:4002 for multiple domains.

I.e domainA.com and domainB.com point to the same localhost:4002 with rev proxy. All the domains use the same App instance So far so good.

But now I've got a requirement for it to work under our partner reverse proxy which will look something like this partner.com/app/ will reverse proxy to partner.domainA.com

Which causes a lot of problems when loading the JS.

Currently the base-href is set to / which works on our sites great. but when a user goes to partner.com/app the browser tries to load all the JS assets from partner.com/*.js while the are only available on partner.com/app/*.js or partner.domainA.com/*.js.

My possible solution is to set APP_BASE_HERF from the server.ts when the request arrives.

But every thing I tried didn't seem to work.

I tried following this guide but it didn't seem to work and it was loading the url from the window object while I need to set it from the origin host which is available only from req.headers.host

in 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}`,
    },
  ],
},

is there a way to put the ORIGIN_URL in index.html base-herf? What is the correct way to set the base-herf in that way?

Thanks

Aakash Garg · Accepted Answer · 2020-06-09 12:56:04Z

1

Change your main.ts to :-

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

in the above code, change url to where your base-href json is.

in appModule add this provider :-

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

edited Jun 9, 2020 at 12:56

answered Jun 9, 2020 at 12:42

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

PatentLobster Over a year ago

All the domains use the same App instance but then all the other sites wont work. I.e domainA.com will try to load js from domainA.com/app and only partner.com/app will work

Aakash Garg Over a year ago

the medium link you gave, is getting base-href from window.location.pathname. any problem in that?

Aakash Garg Over a year ago

do you have a json at your server from where you want to get base-href?

PatentLobster Over a year ago

I use the json in the starter kit github.com/Angular-RU/angular-universal-starter/tree/…

Aakash Garg Over a year ago

i am asking do you want to get the base-href from some json on server?

|

Collectives™ on Stack Overflow

Angular universal SSR dynamic absolute base-herf path

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related