Angular 5 app not displaying on Github pages

Question

I created the default Angular app using the CLI like so:

ng new ng-test-deploy

to test out deploying a dummy app to Github pages. I ran through the procedure as defined here which, to summarise, does this:

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"
angular-cli-ghpages

After doing that I visited the page and receive a blank page. In the console there are multiple errors regarding loading the files:

If i check the url of say the main.bundle.js I can see that the path is pointing to https://katana24.github.io/main.3188de4880a80d258168.bundle.js whereas I can load it by adding the repo name into the url like so: https://katana24.github.io/ng-test-edeploy/main.3188de4880a80d258168.bundle.js

Did I mess up a step?

A previous questions' answer suggested removing the base-href="..." value but this doesn't make sense to me. So how do I get it to look in the right places?

Answer 1

Credit to both @ochs.tobi and @funkizer for their help. So yes, the base href was incorrect for the project.

First thing I had to do was to update the href in the index.html to the name of my project.

After that I needed to rebuild the application for a production environment and only have the project name as the href:

 ng build --prod --base-href "ng-test-deploy"

Then navigating to the site, after say 30 seconds, displayed what I was after.

EDIT

After investigating this some more I feel this is a better option. Inside of the angular-cli.json you can define different apps for different purposes - perhaps one for production, staging etc. Like so:

"apps": [
    { 
      "name": "app-dev",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "app-production",
      "baseHref": "/ng-test-deploy",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Inside each of these objects you can see the base-href to whatever you like. Then to build it out, in this case the app-production app, do this:

ng build --prod --base-href "ng-test-deploy" --app app-production

Which will build the target app for production based on its href. Leaving out the base href tag above resulted in the same error as I described above and is needed.

Answer 2

<base href="/ng-test-deploy/">

This is needed not only for scripts and styles to load, but for router to work properly too.