gh-pages 上的 angular2 基本 url 和相对路径

Question

我正在尝试在 gh-pages 上部署我的项目站点，它是带有 webpack 的 angular2 应用程序，我将基本 url 设置为我的 repo 名称，除了模板中的相对路径外，一切都正常加载，这就是我的意思

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';
}

这在本地开发上运行良好，但是当我将它推送到 gh-pages 分支时它给出 404，因为它试图从根服务器 http://myAcc.github .io/assets/img/fbLogo.svg 而不是 http://myAcc.github.io/myRepo/assets/img/fbLogo.svg

我不知道如何修复它，所以我尝试使用 require 将它用作 inline-svg

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

它在本地运行良好(带有 xss 警告)但是当我将它部署到 gh-pages 时它拒绝通过 https 运行。

我该如何解决这个问题？

Answer 1

对于 future 的访问者，github pages deploy 已从 ng-cli 中删除，并将作为不同的 npm 提供， https://github.com/angular/angular-cli/pull/4385

但现在看来使用 https://github.com/angular-buch/angular-cli-ghpages 可以更轻松地将 Angular 应用程序部署到 github 页面

用法:

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

还有一个更短的 ngh 命令可用

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