title: Angular get root path of application on production
body: <p>I have image path from root as you can see from the code below.</p>
  
  <pre><code>new VideoCategory("360 grader", "/assets/images/videos/video-category-1.jpg", "360-grader")
  </code></pre>
  
  <p>So, the path <code>"/assets/images/videos/video-category-1.jpg"</code> serves fine if my app is hosted in the root folder. But when I host in app in a folder other than root say</p>
  
  <p><a href="http://example.com/subfolder/" rel="nofollow noreferrer">http://example.com/subfolder/</a> then the images does not load obviously. So how do I get the root path of my application in angular?</p>
  
  <p><strong>What I tried?</strong> I tried to use the <code>PlatformLocation</code> and then <code>origin</code> and <code>href</code>. But they does not seem to work.</p>
  
  <pre><code>import { PlatformLocation } from '@angular/common';
  
  export class VideoCategoryService {
    ploc : string;
  
    constructor(platformLocation: PlatformLocation) {
      console.log((platformLocation as any).location);
      console.log((platformLocation as any).location.href);
      console.log((platformLocation as any).location.origin);
      this.ploc = (platformLocation as any).location.origin;
    }
  
    getList(callback) {
      const list = [
          new VideoCategory("360 grader", this.ploc + "/assets/images/videos/video-category-1.jpg", "360-grader")
      ];
      callback(list);
    }
  
  }
  </code></pre>