Redircting to an external Url in Angular SSR

Question

In Angular 2+ only way to redirect to an external Url is to use the window.location.href = '...';.

How to redirect to an external URL in Angular2

However this gives following error when Angular is running in SSR mode.

ERROR ReferenceError: window is not defined

Is there anyway I can avoid this error during Server side rendering of the page.

This is also a problem if you're using in order to try and data bind with a url. It appends that url onto the angular app url as if youre using router. Interested in how to solve a problem like this with inline templates — Jonathan Corrin, Jan 17 '18 at 20:06

score 1 · Answer 1 · answered Jan 15 '18 at 15:50

You'll need to send provide your angular app from the server with an object that you will modify in the angular code

For instance, in your server code inject an extra parameter, which will be modified in the angular app if you need a redirection.

 let respData = {redirectUrl: ''};
//....
 extraProviders: [
 {
    provide: 'httpResponseData',
    useValue: respData,
  }

In the angular application, inject that extra parameter in the constructor of the component/service where you want to specify the redirect url

constructor(@Inject(PLATFORM_ID) private platformId: Object, @Optional() @Inject('httpResponseData') private httpResponseData: any)
{
//...
}

When you want to redirect, use the new parameter instead of the window object

redirect(url: string)
{
    if(isPlatformBrowser(this.platformId))
    {
         window.location.href = url;
    }
    else
    {
         this.httpResponseData.redirectUrl = url;
    }
}

Finally, in your web server, check the value of the respData.redirectUrl property and redirect if the url is set

redirect(url: string) - this method where is written? how can i return httpResponseData from angular to server? can you explain more detail... or give some example... thank you @David — Chipintoza, Feb 23 '18 at 01:35

Redircting to an external Url in Angular SSR

1 Answers1