angular2 base url and relative paths on gh-pages

Question

I'm trying to deploy my project site on gh-pages, it's angular2 app with webpack, I set the base url to my repo name and everything loads fine except the relative paths in the templates, here is what I mean

import {Component} from '@angular/core';

@Component({
  selector: 'header',
  template: `
      <img class="fb-logo" [src]="fbLogo"/>
      <img class="ang-logo" [src]="angularLogo"/>
  `
})

export class Header{

    angularLogo = '../../assets/img/angular-logo.png';
    fbLogo = '../../assets/img/share/facebook.svg';
}

This works well on local dev, but when I push it to gh-pages branch It gives 404 because it's trying to get it from the root server http://myAcc.github.io/assets/img/fbLogo.svg instead of http://myAcc.github.io/myRepo/assets/img/fbLogo.svg

I couldn't figure out how to fix it so I tried to use it as inline-svg using require

angularLogo = require('../../assets/img/angular-logo.png');
fbLogo = require('../../assets/img/share/facebook.svg');

it works fine on local (with xss warnings) but when I deploy it to gh-pages It refuses to run over https.

How can I fix this issue?

Answer 1

For future visitors, github pages deploy has been removed from ng-cli and will be available as different npm, https://github.com/angular/angular-cli/pull/4385

But it looks like deploying an angular app to github pages is now more effortless with https://github.com/angular-buch/angular-cli-ghpages

Usage:

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
angular-cli-ghpages [OPTIONS]

there is also a shorter ngh command available

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
ngh [OPTIONS]