Angular2, Angular-cli, Webpack - image assets not loading on github:pages after prod deploy
<p><hr>
This is NOT a duplicate question:</p>

<p><a href="https://stackoverflow.com/questions/39051959/angular2-base-url-and-relative-paths-on-gh-pages">This question</a> explains the problem but that project was not built with angular-cli, as mine is, hence I do not have a <code>webpack.config</code> file.</p>

<p>Whilst the issue I describe below is clearly about getting the base_url setting correct, it is not the same as <a href="https://stackoverflow.com/questions/34516651/set-base-url-for-angular-2-http-requests">this issue</a>, which is about setting up angular to send requests to a base_url like an api.</p>

<hr>

<p>My project builds and runs on localhost and also on <code>github:pages</code> (even the css all loads correctly). The only thing which does not work on github:pages are the images, which all return 404s (even though I can see them if I navigate to the assets folder directly in the browser).</p>

<p>The problem is that on localhost, angular-cli runs the project with no subfolder after the hostname. But on <code>github:pages</code> it does.</p>

<p>Say for example the project name is <code>testapp</code> then on <code>github:pages</code> it is deployed here:</p>

<pre><code>https://&lt;username&gt;.github.io/testapp
</code></pre>

<p>The images are in</p>

<pre><code>src/assets/images
</code></pre>

<p>They are referenced in css inside angular-2 component using relative paths like this:</p>

<pre><code>background-image: url('../../assets/images/dining-room.png');
</code></pre>

<p>So how do I configure angular-2 production deployment file so that in production the path becomes:</p>

<pre><code>background-image: url('testapp/assets/dining-room.png');
</code></pre>

<p>I understand that <code>github:pages</code> is based off Jekyll and I understand <a href="https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/" rel="noreferrer">this explanation</a>, but what I don't understand is how do you configure an angular-cli project to be aware that <code>github:pages</code> is using a folder to deploy the app.</p>

<p><hr>
<strong>UPDATE 1</strong></p>

<p>So far I have figured out that the command line for deploying to <code>github:pages</code> has a base_href option. So I can do this:</p>

<pre><code>ng github-pages:deploy --base-href /testapp/
</code></pre>

<p>I can then see in the /dist folder that the html file has been changed to include the base href, like this:</p>

<pre><code>&lt;base href="/testapp/"&gt;
</code></pre>

<p>I would have expected this to fix the problem automatically, but the images still return a 404. This base_href is not being automatically injected into the relative paths, as you would expect. Locally the index.html file has <code>&lt;base href="/"&gt;</code> and obviously that works.</p>

<p><hr>
<strong>UPDATE 2</strong></p>

<p>In trying to solve this I am coming to believe this is related to the way Angular builds components. A very good explanation of that can be found <a href="http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html" rel="noreferrer">here</a>.</p>

<p><hr>
<strong>EDIT added angular-cli.json</strong></p>

<pre><code>{
  "project": {
    "version": "1.0.0-beta.22-1",
    "name": "floorbook"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "fb",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}
</code></pre>