Universal: Issue in getting the current URL

Created on 27 Feb 2019  路  5Comments  路  Source: angular/universal

I have an application https://www.shaadion.com. It uses angular univarsal.

I have a url: https://www.shaadion.com/vendor/birmingham/jaineesha-makeup-artist
This is a unique for every user registered on the website and I fetch the user detail using this URL from an endpoint. But when I hit this URL and trying to get the full url in below ways.

  1. Using activated route.
    It hangs the page and nothing renders.

  2. Using location.href
    It says, location is undefined on the server.

Is there any way to get the full url on server as well.

Most helpful comment

.ts
  public static getCurrentAbsoluteSiteUrl(): string {
    if (window
        && "location" in window
        && "protocol" in window.location
        && "pathname" in window.location
        && "host" in window.location) {
      return window.location.protocol + "//" + window.location.host + window.location.pathname;
    }
    return null;
}

try this answer from here

It's not correct. We have Angular SSR in this case, and all these browser global vars like document, location, window are not available, because rendering is done on the server side.

Using Document abstraction would be the way to go for this case.

  1. Import abstraction to your component like this: import { DOCUMENT } from '@angular/common';
  2. Inject it within constructor: @Inject(DOCUMENT) private document: any
  3. Get current url: this.document.location.href

All 5 comments

same problem with me

@flexchintoo were you able to solve the problem, could you please share solution?
Anyone?

You could pass it in from server.ts, or you could save the url as a setting since your app must have settings!

Anyways, I don't think this is the place to be asking as it isn't an issue with Angular

.ts
  public static getCurrentAbsoluteSiteUrl(): string {
    if (window
        && "location" in window
        && "protocol" in window.location
        && "pathname" in window.location
        && "host" in window.location) {
      return window.location.protocol + "//" + window.location.host + window.location.pathname;
    }
    return null;
}

try this answer from here

.ts
  public static getCurrentAbsoluteSiteUrl(): string {
    if (window
        && "location" in window
        && "protocol" in window.location
        && "pathname" in window.location
        && "host" in window.location) {
      return window.location.protocol + "//" + window.location.host + window.location.pathname;
    }
    return null;
}

try this answer from here

It's not correct. We have Angular SSR in this case, and all these browser global vars like document, location, window are not available, because rendering is done on the server side.

Using Document abstraction would be the way to go for this case.

  1. Import abstraction to your component like this: import { DOCUMENT } from '@angular/common';
  2. Inject it within constructor: @Inject(DOCUMENT) private document: any
  3. Get current url: this.document.location.href
Was this page helpful?
0 / 5 - 0 ratings